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,
})
}
}
