NiceBone

checked: boolean = false; ngAfterContentChecked(): void { if (!this.checked) { this.checked = true; setTimeout(() => { ScrollTrigger.refresh(); this.initScrollAnimation(); }, 1); } } ngOnInit(): void { this.initialAnimations(); } @MikeG95 If you use this code it will work but the solution is not that great... You will not notice the 1ms timeout on reloads/routing. You can change it to .1 or .0001 and it will work too. Dont forget to kill the triggers on each component when you got multiple components with animations. ngOnDestroy(): void { let triggers = ScrollTrigger.getAll(); triggers.forEach((trigger) => { trigger.kill(true); }); }

Would be great if you share your solution.. Same problem. With ngAfterViewChecked it will work but the function triggers every ms on the site. I dont really know if its good for the performance on huge sites. Soft Reloads (only f5)/Routing changes will break the markers. I asked all my colleauges at work for a solution but no one got any solutions for this problem.

Hey, I fixed my problem by changing the ScrollTrigger Target to the parent div. Your answer fixed the problem. Thank you!

Hello guys, first of all i'm pretty new to gsap. I've started like 2 days ago with a new angular project. I made a small video regarding my problem with the y axis. Everytime the "scroller-start marker" hits the "start maker" the whole animation goes crazy. Hopefully one of you will find my mistake. video: HTML <h1 #test>MUSIC</h1> Angular part gsap.timeline({ scrollTrigger: { trigger: this.test.nativeElement, start: 'top bottom', end: 'bottom 75%', scrub: 1, markers: true, }, }).fromTo( this.test.nativeElement, { opacity: 0, }, { x: innerWidth, y: -innerHeight, opacity: 1, } ); Thanks Jerome