Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sanjana

ScrollTrigger not working iin Angular

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×