ScrollTrigger not working iin Angular

[Sanjana 2 Likes (Newbie)]

I want to do scroll down animation using GSAP ScrollTrigger in my Angular project like this .

See the Pen vYLmPPV?editors=1010 by sanjuu01 (@sanjuu01) on CodePen

 

I tried this but this is not working. I don't know where i did a mistake. How to solve this

import {Component, HostListener, OnInit } from '@angular/core';
import 'gsap';
import {TimelineMax} from 'gsap/gsap-core';
import Draggable from 'gsap/Draggable';
import ScrollTrigger from 'gsap/ScrollTrigger';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  scrollBox =  new TimelineMax({paused: true, reversed: true,
  scrollTrigger: {
    trigger: '.box',
    pin: true,
    start: 'top top',
    end: 'bottom bottom',
    markers: true,
    toggleActions: 'play none none reverse',
  }
  });
 
constructor() {
}
  ngOnInit() {
    this.scrollTgr();
    gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin);
  }
  scrollTgr() {
    this.scrollBox.from('.box', { y: 30, opacity: 0 });
    this.scrollBox.to('.box', { y: 0, opacity: 1 });
    this.scrollBox.play();
  }
}

 

https://stackblitz.com/edit/angular-scroll-trigger?file=src%2Fapp%2Fapp.component.ts

 

See the Pen app.component.ts by edit (@edit) on CodePen

[ZachSaucier 7,162 Likes (Superhero)]

Hey Sanjana. You made a couple of the most common mistakes people make with GSAP including not using loops and using the old syntax. If you fix those it works great  https://stackblitz.com/edit/angular-scroll-trigger-sryprn?file=src%2Fapp%2Fapp.component.ts

[Sanjana 2 Likes (Newbie)]

Thank you @ZachSaucier

[Sanjana 2 Likes (Newbie)]

hi @ZachSaucier  , 

yesterday its worked but now its not working   I don't understanding what is the issue

 

.html

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

.ts

import {Component, ElementRef, HostListener, Inject, OnInit, ViewChild} 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() {
   
  }
  ngOnInit() {
    gsap.registerPlugin(ScrollTrigger, Draggable);
    this.isAnimation();
  }
  isAnimation(): void {
    document.querySelectorAll('.card').forEach( card => {
     const cardScroll = gsap.timeline( {
       scrollTrigger: {
         trigger: card,
         start: 'center bottom',
         end: 'bottom bottom',
         markers: true,
         toggleActions: 'play none none reverse',
       }
     });
     cardScroll.from( card , { duration: .5,  translateY: 50, opacity: 0 , });
     cardScroll.to( card , { duration: .5, translateY: 0, opacity: 1 , });
    });
    }
}

https://stackblitz.com/edit/angular-ivy-3gne8m?file=src%2Fapp%2Fapp.component.ts

[ZachSaucier 7,162 Likes (Superhero)]

Stop importing things with Lite/Max in them. You don't need them.

 

If you look in the console you see an error about AppRoot. It looks like some Angular error very likely due to your code/configuration. Sorry, we don't really have the capacity to look into every error that you face when they're not related to GSAP.

[andres-morbidoni 0 Likes (Newbie)]

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

[Rodrigo 5,885 Likes (Superhero)]

Hi @andres-morbidoni and welcome to the GreenSock forums!

 

Thank you for sharing your solution and the demo of your implementation! 🥳

 

We love when users share and help growing the knowledge base for GSAP 💚

 

Happy Tweening!