[ScrollTrigger not working iin Angular]

Hi @Sanjana you can try something like this on your ts component: 

import {
  Component,
  ElementRef,
  OnDestroy,
  OnInit,
  QueryList,
  ViewChildren,
} from '@angular/core';
import { gsap } from 'gsap';
import Draggable from 'gsap/Draggable';
import ScrollTrigger from 'gsap/ScrollTrigger';
import { TimelineMax } from 'gsap/gsap-core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  cardData = [
    {
      img: 'https://images.unsplash.com/photo-1518287924895-5a1d0c1ce798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80',
      name: 'Card Name',
    },
    {
      img: 'https://images.unsplash.com/photo-1518287924895-5a1d0c1ce798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80',
      name: 'Card Name',
    },
    {
      img: 'https://images.unsplash.com/photo-1518287924895-5a1d0c1ce798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80',
      name: 'Card Name',
    },
    {
      img: 'https://images.unsplash.com/photo-1518287924895-5a1d0c1ce798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80',
      name: 'Card Name',
    },
    {
      img: 'https://images.unsplash.com/photo-1518287924895-5a1d0c1ce798?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1400&q=80',
      name: 'Card Name',
    },
  ];
  constructor() {}
  @ViewChildren('card') cardItem: QueryList<ElementRef>;
  ngOnInit() {
    gsap.registerPlugin(ScrollTrigger, Draggable);
    setTimeout(() => {
      this.isAnimation();
    }, 100);
  }
  isAnimation(): void {
    let cards = this.cardItem.map((card) => card.nativeElement);
    cards.forEach((box) => {
      const scrollBox = gsap.timeline({
        scrollTrigger: {
          trigger: box,
          pin: true,
          start: 'top center',
          end: 'bottom bottom',
          markers: true,
          toggleActions: 'play none none reverse',
        },
      });
      scrollBox.from(box, { y: 30, opacity: 0 });
    });
  }
}

you can use the @viewChildren directive for select all cards.

Also I use a setTimeOut to call the function because  the ngFor has a little delay In building the data in the html.

 

<div class='card' *ngFor="let data of cardData" #card>
  <div>
    <img [src]="data.img" alt="Photography">
  </div>
  <div class="card-body">
    <h5>{{data.name}}</h5>
  </div>
</div>

https://stackblitz.com/edit/angular-ivy-cpnzfx?file=src/app/app.component.ts