Mokhtar

this solution works with angular spa

you need to wrap your function in a setTimeout func. "Invoking setTimeout with a callback, and zero as the second argument will schedule the callback to be run asynchronously, after the shortest possible delay - which will be around 10ms and the JavaScript thread of execution is not busy." import { Component, OnInit } from '@angular/core'; import {gsap } from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; gsap.registerPlugin( ScrollTrigger ); @Component({ selector: 'app-our-community', templateUrl: './our-community.component.html', styleUrls: ['./our-community.component.scss'] }) export class OurCommunityComponent implements OnInit { communtyAnimation: any constructor() { } ngOnInit(): void { setTimeout(() => { this.communtyAnimation = this.createAnime() }, 0); } createAnime() { gsap.to(".community-title", { scrollTrigger: { trigger: ".community-style", start: "top center", end: "bottom center", toggleActions: "restart reverse restart reverse", }, y: 0, ease: "power1.out", delay: 0.3, }); gsap.to(".community-img" ,{ scrollTrigger: { trigger: ".community-style", start: "top center", end: "bottom center", toggleActions: "restart reverse restart reverse", }, rotate: 0, ease: "power1.out", delay: 0.3, }) } }