scrollTrigger nuxt bugs

[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.

 

See the Pen KKgZJyN by pdub888 (@pdub888) on CodePen

[akapowl]

Hey @pdub

 

I think the problem is related to setting your y-value like this "+900".

 

If you change it to y: 900 it works. Is that what you intended?

 

See the Pen de52e165ca3acd8f0c90c117210dc2fd by akapowl (@akapowl) on CodePen

 

 

 

On a sidenote, since I just read it in a different thread:

 

• In general it's good practice to avoid animating the y position of the element that is used as your trigger. Doing so makes the logic of when to fire events more difficult. (by @ZachSaucier)