Vue.js ScrollTrigger not work

[Cyprian]

I have a my problem in my code gsap in vue3. I import gsap, next import ScrollTrigger plugin and finaly I use scrollTrgger in my project and scrolltrigger not work.

 

https://codesandbox.io/embed/adoring-hill-6rn7f9?fontsize=14&hidenavigation=1&theme=dark

 

[akapowl]

Hello Cyprian

 

I'm not familiar with Vue, but at least on first load, it does work for me.

 

Change makers to markers and you will see.

 

Also, by default it will only play the tween once on enter if you don't define how to control it.

 

Try changing things with regard to the start and toggleActions, like maybe

 

gsap.to("#one",{
	scrollTrigger:{
	  trigger: "#one",
	  markers: true,
	  start: "center center",
	  toggleActions: "play none none reverse"
	},
	x:200, 
	duration:2,
})

 

 

Edit:

I was having some problems with your codesandbox example, so here is that example over on stackblitz instead.

 

https://stackblitz.com/edit/vue-txqcpg

 

As already mentioned, I'm not very familiar with Vue, soI took the idea for how to include ScrollTrigger in there from this codepen example. Maybe it will help.

 

See the Pen BajexOQ by GreenSock (@GreenSock) on CodePen

 

Oh, and the image up top was causing the trigger not to be where expected (probably as it is not loaded yet when the ScrollTrigger gets created), so I added fixed dimensions to it, to make it work properly.

Just something you might want to consider with regard to ScrollTrigger.