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,059 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,059 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.