Sanjana

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

Thank you @ZachSaucier

I want to do scroll down animation using GSAP ScrollTrigger in my Angular project like this . https://codepen.io/sanjuu01/pen/vYLmPPV?editors=1010 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

How to use ScrollTrigger Animation in Angular Projects, please share any tutorial or demo

yes @Nekiy2 thank you very much for responding!

Thank you! @Nekiy2 its working ? but how to add scroll trigger each image, I added one more image but scroll trigger is working only 1st image https://codepen.io/sanjuu01/pen/vYLmPPV

Hi thanks for responding @Nekiy2 In your codepen demo its animating like fade-in & fade-out its working not properly. TranslateY and scale animation is not working https://codepen.io/-greg-/pen/NWxjmoj?editors=1010

I am trying to animate the image if scroll down near to the top or offset 50 on gallery div let img = gsap.timeline(); img.to('.gallery img', { duration: 0.5, opacity: 0, scale: 0.8, translateY: 50, transformOrigin: 'center center', }); img.to('.gallery img', { duration: 0.5, opacity: 1, scale: 1, translateY: 0, transformOrigin: 'center center', }); img.play(); <div class='gallery'> <h1>Scroll down offset GSAP animation</h1> <div class='content'> <img src="https://images.unsplash.com/photo-1466695108335-44674aa2058b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1268&q=80" alt=""> </div> </div>

I tried this component.ts file menu() { const menu = 'nav a'; const menuBg = '.menu'; const tl = gsap.timeline({defaults: {duration: 1}}); tl.from(menuBg, { yPercent: -100 }, 1); tl.from(menu, { x: 100, opacity: 0 }, 1); } .html file <div class="toggle" (click)="menu()"> Menu </div> <div class="menu"> <nav> <a href="">Home</a> <a href="">Profile</a> <a href="">About</a> <a href="">Contact</a> </nav> </div>

Hi @ZachSaucier if open menu animation is working but menu close animaton is not working

I am trying to animate if click on Menu text , Menu will be open top: -100% to 0 and click again menu will be close -100% html <div class="toggle" (click)="menu()"> Menu </div> <div class="menu"> <nav> <a href="">Home</a> <a href="">Profile</a> <a href="">About</a> <a href="">Contact</a> </nav> </div> component.ts import { Component, OnInit } from '@angular/core'; import {GsapService} from '../gsap.service'; declare let TimelineMax: any; import 'gsap'; export class AboutSectionComponent implements OnInit { constructor(private _gsapService: GsapService) { } public menu() { let menu = 'nav a'; let menuBg = '.menu'; let gsap = new TimelineMax(); gsap.from(menuBg, { duration: 1, stagger: 0.2, top: '-100%'}); gsap.to(menuBg, { duration: 1, stagger: 0.2, top: 0}); gsap.from(menu, 1, { x: 100 , opacity: 0, stagger: 0.1234}); gsap.to(menu, 1, { x: 0, opacity: 1, stagger: 0.1234 }); } ngOnInit() { } issue is if i click menu will be open top: -100% to 0 is working fine but i want to animate when i click to close menu the animate to reversed() gsap.reversed(!gsap.reversed()) this is not working

Hello @ZachSaucier I am trying like this. angular.json "scripts": [ "src/assets/js/animation-gsap.js", "./node_modules/gsap/src/all.js" ] animation.gsap.js function f1() { let loading = gsap.timeline(); loading.to('.page', { opacity:0 }, 1); } app.component.ts declare const f1: any;

I am trying to use GSAP in Angular projects

yes @ZachSaucier its my mistake. Thank You for responding.

I create barba.js page transition whith GSAP animation, barba.js is working but gsap animation is not working, when i change the href path location like href="./html/service.html" to href="service.html" its working fine <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="./html/servics.html">Services</a></li> </ul> </nav>

well explained thank you @ZachSaucier

I am trying to design if i click the 'about' in nav list that about content will be animate, before about content animation, children nav list are reverse animate after parent will be animate . I made this code but this seems bit long. How to made this shortest way