Jump to content
GreenSock

Maddy

Scrolltrigger created twice in angular

Recommended Posts

Hello, 

I have an angular app and in one component I copied the code you have in this example .

When I reload this component it works perfectly. But when I am navigating from another component,it breaks,  it looks like the trigger is created twice, and I see the start/end markers twice on the page, creating the same white spacer that is described here

I tried putting it the ngOnInit, in the ngOnAfterViewInit... nothing helps.
Any ideas?

See the Pen bGexQpq by GreenSock (@GreenSock) on CodePen

Link to comment
Share on other sites

Hello @Maddy - welcome to the GreenSock forums.

 

I'm not familiar with Angular at all, but it sounds like you are in an SPA-environment, and the fact that you are seeing the markers multiple times is a sign for you probably having to kill all the old ScrollTriggers when leaving a page and then create them from scratch when you enter the new page.

 

This is from an article on the most common ScrollTrigger mistakes:

 

If you have a single-page application (SPA; i.e. a framework such as React or Vue, a page-transition library like Highway.js, Swup, or Barba.js, or something similar) and you use ScrollTrigger you might run into some issues when you navigate back to a page that you've visited already. Usually this is because SPAs don't automatically destroy and re-create your ScrollTriggers so you need to do that yourself when navigating between pages or components.
 

To do that, you should kill off any relevant ScrollTriggers in whatever tool you're using's unmount or equivalent callback. Then make sure to re-create any necessary ScrollTriggers in the new component/page's mount or equivalent callback. In some cases when the targets and such still exist but the measurements are incorrect you might just need to call ScrollTrigger.refresh(). If you need help in your particular situation, please make a minimal demo and then create a new thread in our forums along with the demo and an explanation of what's going wrong.

 

 

 

For how to kill them, have a look at this answer...

 

 

 

 

... and maybe this thread can help when it comes to specifics of Angular.

 

 

 

  • Like 4
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.
×