andres-morbidoni

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