#Modern Website design

12 messages · Page 1 of 1 (latest)

gleaming flume
#

Looking for learning resource suggestion to build modern web design with Angular, today saw an website that is built with 'lottie', 'animation', 'webflow'. Is there any Angular resource to build modern web design with GSAP, WebFlow, WebGL etc.

gleaming flume
#

Found they use sometimes Webflow, GSAP. Sometimes use Lottie and Webflow, sometimes use three js, gsap etc.

valid kite
#

If you need to use WebGL, you're going a lot deeper than just building a webapp.
You'll want to learn how to build an easily maintainable, stable webapp first with solid state management, declarative programming style, decent usage of changeDetection and maybe having some more solid foundations in writing css animations before you go off the deep end and manually try to write webgpu code, something you almost never ever need.

gleaming flume
#

Thanks @valid kite for the information.

#

Today started learning GSAP, trying to integrate with Angular, though in the GSAP docs it is written in 'JS' using AI tried to integrate with TS rather than going with JS, sharing some code

tween.html

<div class="container">
    <h2>GSAP + Angular (e.g.: Tween)</h2>
    <div #g class="box green"></div>
    <div #p class="box purple"></div>
    <div #b class="box blue"></div>
</div>

tween.css

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  flex-direction: column;
  background-color: #1a1a1a; /* Dark background like FreezPak */
}

.box {
  width: 100px;
  height: 100px;
  border-radius: 12px;
}

/* Ensure these match your HTML classes */
.green  { background: linear-gradient(45deg, #28a745, #85e09b); }
.purple { background: linear-gradient(45deg, #6f42c1, #a389d4); }
.blue   { background: linear-gradient(45deg, #007bff, #66b0ff); }

tween.animation.ts

import { gsap } from "gsap";

export const startTween = (targets: string) => {
  const tl = gsap.timeline({ defaults: { duration: 1, ease: "power2.out" } });

  tl.to(".green", { rotation: 360, x: 100 })
    .from(".purple", { rotation: -360, x: -100 }, "-=0.5") // Overlap by 0.5s
    .fromTo(".blue", { x: -100, opacity: 0 }, { rotation: 360, x: 100, opacity: 1 });
};

tween.component.ts

import { Component, AfterViewInit } from "@angular/core";
import { startTween } from "../../animations/tween.animation";

@Component({
  selector: 'tween-component',
  standalone: true,
  templateUrl: '../tween.html',
  styleUrl: '../tween.css'
})
export class TweenComponent implements AfterViewInit {
  ngAfterViewInit() {
    // One single call to trigger your external logic
    startTween('.box'); 
  }
}

Then calling to app.ts

#

Now the questions are:

  1. Am I doing the right process for learning with the help of AI ?
  2. Is this the correct way to implement GSAP in Angular ?
  3. For Enterprise Full-Stack Development or Commercial related I know this type of website using GSAP or WebGL are not needed but still some industries are seeking for this kinda website, also saw in some bike website already they are using superb 3D websites, is it right way to learn and implement GSAP in Angular v21, or should I keep JS implementation procedure as per GSAP documentation ?
gleaming flume
#

Found another way to implement with minimal code:

tween.html

<div>
    <h2>GSAP + Angular (e.g.: Tween)</h2>
    <div class="box green" id="green"></div>
    <div class="box purple" id="purple"></div>
    <div class="box blue" id="blue"></div>
</div>

CSS code remains same, no changes.

tween.component.ts

import { Component, AfterViewInit } from "@angular/core";
import gsap from "gsap";

@Component({
    selector: 'tween-component',
    standalone: true,
    templateUrl: '../tween.html',
    styleUrl: '../tween.css'
})
export class TweenComponent implements AfterViewInit {
    ngAfterViewInit() {
        const tl = gsap.timeline({ defaults: { duration: 1, ease: "power2.out" } });

        // Step 1: Green rotates AND moves far right
        tl.to("#green", { rotation: 360, x: 774 })

            // Step 2: Purple comes FROM the left (-100) while moving to the right (774)
            // Step 2: Use .from with only ONE object
            .from("#purple", {
                rotation: -360,
                x: 774,
                duration: 2
            }) // Position parameter goes AFTER the object

            // Step 3: Blue does its final move
            .fromTo("#blue",
                { x: -100 },
                { rotation: 360, x: 774 }
            );
    }
}

This takes minimal lines of code.

valid kite
# gleaming flume Now the questions are: 1. Am I doing the right process for learning with the h...

Whether you're learning "right" only you can tell. The important thing is that you get an idea of software design, what coding patterns have which consequences etc.
As for GSAP - I have no idea what it is, looks like an animation library. If it is, how does it make things simpler for you over just using a css keyframe animation? What is your justification for pulling in an abstraction over CSS when it does not look that much simpler than just using CSS?

These are questions you should be aware of.
I'm not going to look into how to use GSAP for you, all I can say is that unless I was asked to do some really complex animations, I would not reach for an external animations library.

gleaming flume
# valid kite Whether you're learning "right" only you can tell. The important thing is that y...

GSAP helps me to implement complex animation with ease rather than going with CSS. Now in Angular we can implement GSAP some ways,

  1. Writing seperate JS file
  2. Writing seperate TS file rather than going JS
  3. Writing the animation logic in component.ts under export class.
    And some more other ways.
    I am new to Angular so I don't know what is the standard approach and folder structure for implementation of animations. That's why I asked 'Am I going in the right direction using help of AI', as I shared the code in this thread.
valid kite
#

I think I still wouldn't recommend it.
It is too large a dependency (in terms of how it'll grow your client and make initial page loads slower) and I don't think it brings enough to the table to warrant using.
If you're set on it, put it where it makes sense to you.
From putting animations into a separate library in a monorepo, to putting them in a separate file in the same folder as the component it gets used in, to having an _animations folder per domain or whatever it can all work out.

#

Also this is angular, your files should always be TS files, never JS. You have a TS compiler built into the project and doing typing properly helps down the line.