Jump to content
Search Community

Issue removing/kill ScrollTrigger

neo420 test
Moderator Tag

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

  • 1 year later...
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

  • 3 months later...
  • 1 year later...

As I understand it, in barba js the house is updated between the afterEnter and after events In my case, in the afterEnter event, when we create the scrollTrigger again, the coordinates of the trigger block most likely did not correspond to the block coordinates, I think that this may be due to the fact that transition has negative coordinates, in order to trigger, as I understand it, you need to create an element in the after event.

image.thumb.png.33889f68307d8e7cdc96cc72623fb76f.png
 

barba.hooks.after((data) => {
    switch (data.next.namespace) {
        case 'main': {
            let triggers = ScrollTrigger.getAll();
            console.log(triggers);
            triggers.forEach(trigger => {
                trigger.kill();
            });
            scaleLogo = createScrollTrigger();
        }
        case 'works': {

        }
    }
})

 

Link to comment
Share on other sites

Hi,

 

I have zero experience with Barba, but what I can tell you from creating transitions in frameworks like Vue and React is that you have to create your instances after the next route or page has been animated in. So when the animation out of the previous page is completed, you should kill/revert all your GSAP and ScrollTrigger instances. When the new page transition is completed, everything is in the position it should and all the styles added by the transition are removed (be careful here, we've seen some cases where the page transition animation adds some styles that then create issues with ScrollTrigger instances, especially if you apply transforms on a global wrapper and then you create a ScrollTrigger instance that pins something), then you can safely create your GSAP instances and ScrollTriggers. This is more a matter of when and not much what, as far as I can tell.

 

Happy Tweening!

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.
×
×
  • Create New...