Issue removing/kill ScrollTrigger

[neo420 5 Likes (Newbie)]

Hi ! 

I'm actually struggling - killing and resetting ScrollTrigger.

Let me explain. I'm currently developping a website using ScrollTriger AND locomitive-scroll. 

I succeed making both working perfectly together, thanks to your example. 

But the thing is that my website is in ajax (Barba js), the first time i go to my page, every thing is alright but when I change and i come back, there is an error on the ScrollTrigger.refresh().

I tried :

        ScrollTrigger.kill();
        ScrollTrigger.removeEventListener('refresh', () => locoScroll.update());
        ScrollTrigger.removeEventListener('refreshInit');

 

Do you have any idea what am I doing wrong ?

 

Thank you very much for your work !

[akapowl 5,215 Likes (Superhero)]

Hey @neo420

 

It's always kind of hard to give any good advice without an example - especially with the combination of barba and other libraries.

 

My guess is, that you will probably have to kill/destroy both, your ScrollTriggers AND locomotive-scroll when leaving a page, and reinitialize both after your transition. So first off, locomotive-scroll gets knwoledge of the new environment it is supposed to be working in, and then your ScrollTriggers get that same information and can also adjust to locomotive-scroll.

 

A good way to kill all your ScrollTriggers is this

 

let triggers = ScrollTrigger.getAll();
triggers.forEach( trigger => {			
  trigger.kill();
});

 

 

Locomotive-scroll has a .destroy method of its own.

 

Give it a try and see if it helps.

 

Cheers,

Paul

 

[neo420 5 Likes (Newbie)]

Thank you @akapowl for your reply. I tried this, looks like it's not the problem.

 

I'll show it with a gsap codepen that i modify a little bit.

See the Pen oNLBLJy by benmcarnolds (@benmcarnolds) on CodePen

So when I first go the page, every thing works fine. When I leave the page the unload() function is called, locomotive.destroy() and triggers killing.

And when i come back, every thing seems to work until ScrollTrigger.refresh();

 

Can't figure it out, what i shall do

[akapowl 5,215 Likes (Superhero)]

 

Unfortunately that example doesn't help much in regards to your transition problem, because it doesn't include barba.

You'd probably have to use something like codesandbox or a codepen project to make a working example.

 

When you enter a new page, do you initiate everything again?

(Sorry if that question might sound stupid, but maybe you don't and that would explain it not working)

 

Also, I don't know if that actually is or can be source ofproblems, but you are using GSAP v3.3.4 with ScrolTrigger's latest beta.

scrollerProxy was only introduced in GSAP 3.4.0.

 

So maybe try updating those files you load to the most recent version and see if it changes anything.

 

 

[neo420 5 Likes (Newbie)]

Hi akapowl,

I resolved the problem by passing to ScrollTrigger.refresh parameter safe to true ScrollTrigger.refresh(true)

I guess the DOM wasn't fully charged.

Thanks again for your time,

Have a nice day !

[harpreet singh 0 Likes (Newbie)]

well i do have same problem but none of the above mentioned solutions worked .can anybody here help ..please..

[akapowl 5,215 Likes (Superhero)]

On 10/23/2020 at 12:37 PM, akapowl said:

It's always kind of hard to give any good advice without an example - especially with the combination of barba and other libraries.

 

If you can set up a minimal demo an there is anything directly related to GSAP we can help you with, we'll be glad to try and do so.

 

For things to work with barba, you will have to either create a project on codepen (regular pens won't work with barba) or use another platform like codesandbox or stackblitz.

 

This here is a rather minimal demo that I recently made on stackblitz for another thread. Maybe you can fork and edit that one.

 

https://stackblitz.com/edit/web-platform-j6l93d

 

[Mokhtar 3 Likes (Newbie)]

this solution works with angular spa 

 

[elsabban 2 Likes (Newbie)]

awesome it works thanks @Mokhtar