pdub Posted December 14, 2020 Share Posted December 14, 2020 I am using nuxt's npm gsap plugin. https://www.npmjs.com/package/nuxt-gsap While there are some issues I have to figure out sometimes with nuxt, I am not sure if this is one of them. I am having problems clearing out all of my timelines. I have a listener that is firing at the correct time - i'm just not sure if it's actually doing anything to my scrollTrigger timelines. const removeWrapperListen = (v, col1, col2)=> { console.log("REMOVE LISTEN"); document.querySelector(".m").style.zIndex = v; } const addWrapperListen = (v, col1, col2)=> { document.querySelector(".m").style.zIndex = v; } // doesnt matter the animation - just that it works let t1 = this.$gsap.timeline({ scrollTrigger: { trigger: ".whatever", start: "-200px bottom", end: "+=100", scrub: true } }) .to('.blah', {duration:1, ease:'expo.in', opacity:1}) let t2 = this.$gsap.timeline({ scrollTrigger: { trigger: ".whatevertwo", start: "-20px bottom", end: "+=200", scrub: true, onLeave:() => removeWrapperListen(10, mint, fadedred), onEnterBack:() => addWrapperListen(10, mint, fadedred) } }) .to(num, {var: 3000, duration: 5, ease:"none", onUpdate:changeNumber, onUpdateParams:[num]}) // this fires this.$nuxt.$on('index-width-mobile', () => { console.log("NO LISTENERS!") t1.clear(); t2.clear(); }); Unfortunately i'm still getting addWrapperListen firing - "Uncaught TypeError: Cannot read property 'style' of null at addWrapperListen" Am I clearing the timeline variables correctly with clear() ? Is there another way to just remove all gsap animation on this component without affecting others? A hack way, which i ultimately don't want to do, is set a variable and do a number of if statements inside of my functions? i.e. const addWrapperListen = () =>{ if(something){document.querySelector.....} but I don't really think that's the best way. Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 14, 2020 Share Posted December 14, 2020 Hey pdub. Can you please create a minimal demo? Please strip out everything unrelated to your question. Link to comment Share on other sites More sharing options...
pdub Posted December 14, 2020 Author Share Posted December 14, 2020 I'd love to - but codepen doesn't support nuxt all that well...and codesandbox is kind of a nightmare to set up with all the dependencies. Link to comment Share on other sites More sharing options...
pdub Posted December 14, 2020 Author Share Posted December 14, 2020 I guess my generic question is, if I set my timelines to let ( vars ) and that event is firing - should that clear() - for each reference - technically remove any onLeave(), onLeaveEnter(), onEnter(), on EnterBack() listeners? Or is there a better way to clear everything in that scope? Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 14, 2020 Share Posted December 14, 2020 You should kill off your ScrollTriggers in addition to clearing the timelines. Try something like this: ScrollTrigger.getAll().forEach(ST => ST.kill()); Link to comment Share on other sites More sharing options...
pdub Posted December 14, 2020 Author Share Posted December 14, 2020 (edited) Well, we are definitely on to something. No errors! Unfortunately, ( and i know it's not ideal - but there's not a great way around it in nuxt ) - I don't have just one uniform scrollTrigger - so that kills ALL animation in my project. There is a scrollTrigger in a couple other components. I wonder if this is one global scrollTrigger when registered: this.$gsap.registerPlugin(ScrollTrigger); Or if I could set it to a const or let and give it scope and then target that one. I know this isn't specifically a GSAP question since it's a port for nuxt - so answering what this.$gsap.registerPlugin(ScrollTrigger) does may not be directly/specific to this forum. I'll take a look. Edited December 14, 2020 by pdub * needed to add a sentence Link to comment Share on other sites More sharing options...
ZachSaucier Posted December 14, 2020 Share Posted December 14, 2020 As covered in the docs, you can attach an ID to a ScrollTrigger and get it using that. But what would likely be easier is keeping track of all of the relevant ScrollTriggers in an array or something like that. Link to comment Share on other sites More sharing options...
pdub Posted December 14, 2020 Author Share Posted December 14, 2020 "As covered in the docs, you can attach an ID to a ScrollTrigger and get it using that." And that is the answer right there. Well done and thank you. For anyone else dealing with clearing the scrollTrigger plugin within a component: let t1 = this.$gsap.timeline({ scrollTrigger: { trigger: ".your-trigger", start: "-200px bottom", end: "+=100", scrub: true, id:"t1" } }) .to('.blah', {duration:1, ease:'expo.in', opacity:1}) ScrollTrigger.getById("t1").disable(); 1 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