pdub

I can't get gsap nuxt functioning in a codepen...but this code fires in mounted(). this.$gsap.utils.toArray(this.$refs.comp).forEach(blk => { console.log(blk.$el) let comp1 = this.$gsap.timeline({ scrollTrigger: { trigger: blk.$el, start: "top bottom", end: "+=1200", markers: true, scrub:false, toggleActions:defaultActions, id:"wkcomponent" } }); comp1.from(blk.$el, { duration: 2, y:"+300", ease: "expo.out" }); }); This works for the first item and sometimes works on other items - but the markers are often very off - with a start and end marker being exactly on the same line ( i.e. there is no height to the trigger ). I have also tried to fix with a setTimeout refresh - but that doesn't seem to do anything. setTimeout(function(){ ScrollTrigger.getById("wkcomponent").refresh(); }, 3000); I've attached a non nuxt example of this - but for some reason it's not working at all...is there something in the way i'm setting up the utils that wouldn't correctly trigger my elements? Do I need to create unique references to the timeline or give the scrollTriggers unique IDs? Thanks.

"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();

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.

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?

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.

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.

Adding to this before any answer and just in case no one answers but someone is searching for a 'solve'/hack: My parent won't call mounted() until it's children are all mounted. So I set a prop on the child called parentmounted ( heyo ) - which when mounted() in parent is called, I set from false ( in the data() ) to true. //parent mounted() { console.log("ALL FEATURED WORK IS MOUNTED") this.fullyMounted = true; So now my components are all loaded, I set a watch for the prop change them, and if it's the first instance, i'll create the forEach looking for all the rendered classes. watch: { parentmounted: function(newVal, oldVal) { // watch it // hack way of determining that the parent has loaded then only create one instance/one timeline of gsap let st = this.$gsap.registerPlugin(ScrollTrigger); let gsp = this.$gsap; gsp.utils.toArray(".feat-component").forEach((blk,index) => { if(this.id==0 && index != 0){ let tl = this.$gsap.timeline({ scrollTrigger: { trigger: blk, markers: true, scrub:true } }); tl.from(blk, { duration: 2, y:"+400", ease: "expo.out" }); } }); } } There is probably a better way to do it - but at least this way I know that all my '.feat-component' DOM el's will be loaded. And I set only one global timeline ( i'm not so sure if it's the timeline object, the global gsap object, or the utils array that was f'ing everything up ).

I am using the npm package for nuxt: https://www.npmjs.com/package/nuxt-gsap It works alright - I do seem to have to re-register ScrollTrigger on every script tag ( perhaps making a new instance and rewriting the other ). ( i know it is global - but in order to get it working, it seems to have to be registered again for reference sake ). Regardless, working alright - except when in this instance I need to add a series of timeline animations to the utils array contained within a component. A nuxt component's lifecycle fires mounted() when the DOM element has been added...and when I added it without the below code, it completely broke - and my guess is that there was multiple instances?? of either a timeline or multiple instances of gsap ( i'm not even sure at this point ) that was competing with one another. Since I have multiple components, I wrote kind of a 'hack' to see if it's the first instance ( using an id generated by index ) of this component, and if it is, only create a timeline instance with a forEach array of my classes I need to animate. It looks to be working, for now, but I'm pretty confident that once live, there will be times where this component renders before the others and thus doesn't apply the forEach loop to the other classes ( b/c they aren't rendered yet ). Can someone talk me off a ledge and say it'll be OK ( because of the way gsap works? ) or suggest a different solution. I know it's a tough case ( and also partly/mostly a nuxt question ) - thanks: <!-- parent component, pass index/id --> <template> <section> <FeaturedSection v-for="(item,index) in mycontent" :id="index" :key="item._uid"/> </section> </template> <! -- FeaturedSection/child component - say I have 3 of these, but each one fires mounted I think --> <template> <section> <component v-for="mycomponent in mycontent" class="feat-component" :key="mycomponent._uid" :blok="mycomponent" :is="mycomponent.component" :id="id"></component> </section> </template> <script> import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js"; export default { mounted(){ let st = this.$gsap.registerPlugin(ScrollTrigger); let gsp = this.$gsap; gsp.utils.toArray(".feat-component").forEach((blk,index) => { if(this.id==0 && index != 0){ let tl = this.$gsap.timeline({ scrollTrigger: { trigger: blk, markers: true, scrub:true } }); tl.from(blk, { duration: 2, y:"+600", ease: "expo.out" }); } }); } } </script>