neo420 Posted October 23, 2020 Share Posted October 23, 2020 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 More sharing options...
akapowl Posted October 23, 2020 Share Posted October 23, 2020 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 4 Link to comment Share on other sites More sharing options...
neo420 Posted October 23, 2020 Author Share Posted October 23, 2020 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 More sharing options...
akapowl Posted October 23, 2020 Share Posted October 23, 2020 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. 3 Link to comment Share on other sites More sharing options...
neo420 Posted October 30, 2020 Author Share Posted October 30, 2020 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 ! 4 Link to comment Share on other sites More sharing options...
harpreet singh Posted April 2, 2022 Share Posted April 2, 2022 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 More sharing options...
akapowl Posted April 2, 2022 Share Posted April 2, 2022 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 2 Link to comment Share on other sites More sharing options...
Mokhtar Posted July 28, 2022 Share Posted July 28, 2022 this solution works with angular spa 1 Link to comment Share on other sites More sharing options...
elsabban Posted July 28, 2022 Share Posted July 28, 2022 awesome it works thanks @Mokhtar 1 Link to comment Share on other sites More sharing options...
mikhael Posted December 18, 2023 Share Posted December 18, 2023 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. 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 More sharing options...
Rodrigo Posted December 18, 2023 Share Posted December 18, 2023 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now