I need help, I am not able to use animation in multiple routes in Angular

[Mishan]

It is not working properly. Let me explain

here is code

https://github.com/mishangoti/scroll-component

here is video explanation of the issue

https://www.awesomescreenshot.com/video/2250268?key=4b667fca8dbad42e89d408e58a1b2034

 

1) what ever page route I refresh, animation on that page work very good, but when I navigate to other route from that route it does not work properly, However if  I refresh that route it works good but in other route it does not work as desired. I have given video link for more detail explanation. 
Please help me solve this issue, I can't solve it by my self. 

2) when i switch route for few times all pages animation start working, but it did not work when i refresh and switch route at first time it did not work, then i switch routes few time than animation start working.

Contact: https://api.whatsapp.com/send?phone=919429011743&text=HI&source=&data=&app_absent=

Please contact me if you know the solution.

[ZachSaucier]

Hey Mishan and welcome to the GreenSock forums.

 

It looks like you're not killing off the ScrollTriggers that you created like you should be when switching components. Since switching components doesn't actually navigate to a new page the ScrollTriggers still exist unless you kill them off. So killing them off when your component unmounts should fix the issue.

[Nbiaz]

Hello ZachSaucier!!

 

Same problem in my project...

I tried to kill the ScrollTriggers with globalThis.ScrollTrigger.kill() but after angular navigation (Ionic here in particular) i cannot to see markers...

 

Same problem with components created after an *ngIf changed on true!

All ok after the refresh...

[OSUblake]

The advice is still the same. You need to kill and create the ScrollTriggers at the proper lifecycle stages for whatever that might be in your app.

 

[GreenSock]

9 hours ago, Nbiaz said:

I tried to kill the ScrollTriggers with globalThis.ScrollTrigger.kill() but after angular navigation (Ionic here in particular) i cannot to see markers...

 

You should definitely NOT call ScrollTrigger.kill() as a static method - that will kill ScrollTrigger entirely and permanently. You should call .kill() on individual instances, or just:

ScrollTrigger.getAll().forEach(t => t.kill());

 

[Nbiaz]

3 hours ago, GreenSock said:

You should definitely NOT call ScrollTrigger.kill() as a static method - that will kill ScrollTrigger entirely and permanently. You should call .kill() on individual instances, or just:

ScrollTrigger.getAll().forEach(t => t.kill());

 

 

Yep!
 

Obviously inside a .map where i pushed all my scrollers! I did so.

 

I found a workaround for Angular / Ionic.

 

Instead of using [routerLink]="home" and then browsing as a SPA using  basic href="./home" as navigation method this actually reloads the page and everything works fine even after browsing.

 

In fact, the problem seems to be limited to "fake browsing" in the SPA!