Animating Angular Components with GSAP

Hi folks,
Welcome again! I hope you are doing well. I am thrilled to see you here. In this blog, we will discuss about GSAP (GreenSock Animation Platform) and its integration with angular project.

Introduction

Animations can significantly enhance user experience by adding a layer of interactivity and visual engagement to your applications. When it comes to web animations, GreenSock Animation Platform (GSAP) is one of the most powerful and flexible libraries available. It offers performance-optimized animations with smooth transitions and a rich set of features, making it a great tool for animating Angular components.

So, today with the help of this blog we’ll walk through the basics of using GSAP with Angular to create seamless animations.

What is GSAP?

GSAP (GreenSock Animation Platform) is a JavaScript animation library that creates a high-performance animation platform for the web. It allows developers to create complex animations with ease and speed. It is capable of animating CSS properties, SVGs, canvas objects, and more.

Developers and designers worldwide widely use GSAP for its versatility and performance. Its powerful timeline feature enables developers to easily control complex animation sequences.

Why Use GSAP with Angular?

Angular has a built-in animation module, but for advanced and more performant animations, GSAP is often the preferred choice. Here’s why:

1. Performance: This library is highly optimized for speed and works efficiently across browsers.
2. Ease of Use: The API is intuitive and easy to integrate with Angular projects.
3. Flexibility: GSAP can animate virtually anything, from CSS properties to canvas elements.
4. Powerful Timelines: GSAP’s timeline feature provides easy control over complex sequences, making it easier to manage animations.

Using GSAP in Angular

Let’s first create our Angular and Install GSAP

To create angular project:

ng new <project-name>

To install GSAP via npm:

npm install gsap

Importing GSAP in a Component

Now the library is installed and now we need to import it into your Angular component where you want to use the animations.

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
import { gsap } from 'gsap';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements AfterViewInit {
  
  @ViewChild('box') box!: ElementRef;

  ngAfterViewInit() {
    gsap.to(this.box.nativeElement, { duration: 1, x: 100, opacity: 1 });
  }
}

Using GSAP Creating Animation

Add the HTML Elements to the app-home component:

<div #box class="box">Animate me! </div>

Style the Element present in the component by adding some basic styles in home.component.css:

.box {
  width: 100px;
  height: 100px;
  background-color: coral;
  opacity: 0;
  transform: translateX(0);
}

Create the Animation:

ngAfterViewInit() {
  gsap.to(this.box.nativeElement, { duration: 1, x: 100, opacity: 1 });
}

This simple animation will be triggered when the component is fully rendered, making the box smoothly move from left to right and fade in.

Adding More Complex Animations

We can add more complex animations with GSAP.
Let’s say you want to create a sequence where multiple elements are animated in a timeline. You can achieve this using GSAP’s Timeline feature.

ngAfterViewInit() {
  const tl = gsap.timeline();

  tl.to(this.box.nativeElement, { duration: 1, x: 100, opacity: 1 })
    .to(this.box.nativeElement, { duration: 1, rotation: 360 })
    .to(this.box.nativeElement, { duration: 1, scale: 1.5 });
}

Here, we first move the box 100 pixels to the right, then rotate it 360 degrees, and finally scale it up by 1.5 times, all in a seamless sequence.

Triggering Animations on Scroll

You can also add trigger animations on scroll using the ScrollTrigger plugin. To add this plugin, first install it:

npm install gsap/ScrollTrigger

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

ngAfterViewInit() {
  gsap.to(this.box.nativeElement, {
    scrollTrigger: {
      trigger: this.box.nativeElement,
      start: 'top center',
      end: 'bottom center',
      scrub: true
    },
    x: 200,
    opacity: 1
  });
}

In this scenario, the box will move 200 pixels horizontally and fade in as you scroll, with the animation controlled by scroll progress.

Note*

You do not need to adjust any Angular configuration files (like angular.json or tsconfig.json) to use it, as it is a standard JavaScript library. You can install it via npm and import it directly into your Angular components without any special configuration.

Conclusion

An incredible library for enhancing Angular applications with smooth, high-performance animations. By leveraging GSAP’s rich feature set, you can create interactive, visually appealing experiences for your users. Whether you’re animating simple components or building complex sequences, it provides the flexibility and control you need.

If you are using Angular you definitely want components that you can use over and over again in your project. Start integrating GSAP into your Angular projects and bring your components to life!

Hey, let’s stay in touch!

If you liked this blog, please share it with your friends and colleagues. Connect with FE competency on LinkedIn to read more about such topics.