olmo Posted September 3, 2021 Share Posted September 3, 2021 Hello, I am using Angular 9 with GSAP, however being a single page application I have to kill the triggers each time I leave a page using const triggers = ScrollTrigger.getAll(); if (triggers) { triggers.forEach((trigger) => { trigger.kill(); }) } However, each time I come back to a page where I have my animations instantiated (OnInit) the animations gets correctly created however the triggers get translate way below the actual point where they are supposed to be. This is the component part constructor(private _gsapService: GsapService) { } ngOnInit(): void { this.fadeIn1(); this.an1(); this.an2(); this.an3(); this.an4(); this.an5(); this.an6(); this.pc(); this.highLight(); this.setItem(); this.an7(); this.an8(); console.log(ScrollTrigger.getAll()) } ngOnDestroy(): void { this._gsapService.killAnimations(); console.log(ScrollTrigger.getAll()) } Thank you for any help you can give me Link to comment Share on other sites More sharing options...
OSUblake Posted September 3, 2021 Share Posted September 3, 2021 Welcome to forums @olmo If you need help, please provide a minimal demo showing the issue. You can use codesandbox or stackblitz for Angular. Link to comment Share on other sites More sharing options...
GreenSock Posted September 3, 2021 Share Posted September 3, 2021 That almost surely means that you created your ScrollTriggers BEFORE Angular was done shifting around the layout. I'm not an Angular guy at all, but maybe use ngAfterViewInit() instead? You just need to make sure that you either create your ScrollTriggers after the page is fully laid out -or- you could call ScrollTrigger.refresh() after it's done (that'll force ScrollTrigger to re-calculate all the start/end values). 1 Link to comment Share on other sites More sharing options...
olmo Posted September 5, 2021 Author Share Posted September 5, 2021 Hello thank you for the answers, this somehow worked , (it needs the (true) in the refresh()) ngAfterViewInit(): void { this.anim0(); this.anim1(); this.anim2(); } ngOnInit(): void { ScrollTrigger.refresh(true) } ngOnDestroy(): void { this._gsapService.killBIll(); console.log(ScrollTrigger.getAll()) } 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now