GSAP for animation

Introduction

Web animation in its most basic form involves changing the property value of elements as many times per second as possible. GSAP does this by taking in a start and end value, then transitioning intermittently between these two values to create an animation effect. The fade out effect, for instance, is achieved by setting the start and end opacity of an element to 1 and 0 respectively. The result is a gradual fade of the specified element as the opacity property value transitions from 1 to 0.

Getting started with GSAP For angular

GSAP can be loaded to your application in many ways, but the fastest approach is to add the GSAP CDN to your HTML file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>

Alternatively, GSAP can be installed using npm and yarn. For npm installation, run:

npm install gsap

GSAP ScrollTrigger plugin

ScrollTrigger is built on the GSAP and can be used to trigger those intriguing GSAP animations on the scroll with just a few lines of code, excellent performance, cross-browser compatibility, and support from the GSAP community.

YouComponent.ts

import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import { gsap } from 'gsap';
import { DOCUMENT } from '@angular/common';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  @ViewChild('imageFirst', { static: true }) imageFirst!: ElementRef< HTMLDivElemen>;

 constructor(@Inject(DOCUMENT) private document: Document) {}

 ngOnInit() {
  this.initScrollAnimations();
}

 initScrollAnimations(): void {
    gsap.to(this.imageFirst.nativeElement, {
      scrollTrigger: {
        trigger: this.imageFirst.nativeElement,
        scrub: true,
  
        start: '50% center',
      } as gsap.plugins.ScrollTriggerInstanceVars,
      duration: 1.1,
      scale: 1.2,
      height: 250,
      
    });
}
}

Trigger

The property is used to specify the point we want our animation to start

Scrub

The scrub property links the scroll position to an animation’s progress. When you set scrub to true, it makes the scroll bar act as a scrubber while it’s between the start and end position property.

Start

By default, the trigger element starts animating as soon as it enters the bottom of the scroller’s viewport.

However, we can change the default start position using the ScrollTrigger start property.

Your HTML

<div #imageFirst>
   <img src="./you-img">
</div>