Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
neo420

Issue removing/kill ScrollTrigger

Recommended Posts

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 !

Link to comment
Share on other sites

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

 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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.

 

 

  • Like 3
Link to comment
Share on other sites

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 !

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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

Link to comment
Share on other sites

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

 

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