hello-there

Codepen is not really ideal to build multiple routes application, which is the step where it seems to break at my point. I tried replicating the problem on a codesandbox but the browser from it didn't seem to render the animations at all, I'll see if I can make a test somewhere else and post it here.

Well thank you very much for your reply. I just tried calling this in my ngOnDestroy() method but it didn't fix my problem ?

I have simple animations on a homepage component that works amazingly when I first visit the page or if I just refresh with F5: @ViewChild('section1', {static: true}) section1: ElementRef<HTMLDivElement>; @ViewChild('section2', {static: true}) section2: ElementRef<HTMLDivElement>; ngOnInit(): void { this.initScrollAnimation(); } ngOnDestroy() { ScrollTrigger.refresh(); } initScrollAnimation(): void { gsap.utils.toArray<HTMLElement>(".defil").forEach(section => { ScrollTrigger.create({ trigger: section, start: 'top top', pin: true, pinSpacing: false }); }); gsap.to(this.section1.nativeElement, { scrollTrigger: { trigger: this.section2.nativeElement }, duration: 1, y: 150, scale: 0.9 }) } But when I visit another page through angular routing and get back to this one I can't make this 2 scrolltrigger to work. I am new to the scrolltrigger and to gsap and there may be something I'm not understanding and not using well according to angular lifecycle. If you could help me on this one, I am stuck. Tried to find similar issues but it didn't seem to be the same problem nor work for me. I also have another minor issue that is not as important to me but when the gsap.to animation triggered if I get back to the top of the page and get back down it doesn't retrigger a second time.