Jump to content
GreenSock

Mishan

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

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 11 months later...

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...

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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());

 

  • Like 1
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×