OSUblake

Not sure what's up with your demo, but your code seems to work fine here.
 

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

Welcome to the forums @gisdirk
 
You can only animate properties that exist on the object you are targeting. There is no x property on a mesh.
 
console.log("mesh x", mesh.x)  
You would need to use the object with those properties as the target, for example.
 
gsap.to(mesh.rotation, { duration: 2, x: 3 }); gsap.to(mesh.position, { duration: 2, x: 3 }); gsap.to(mesh.scale, { duration: 2, x: 3 });  

Hi n.wantanabe, 
 
You're original demo was using the beta version, which has this fix in place. 
 
 
 

Welcome to the forums @n.watanabe
 
There was the CSSRulePlugin, but it's very limited as you can only target rules and not elements. I would recommend using CSS variables instead.
 

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

Another update. I'm thinking in the next update, I think I'm going to do infinite scrolling and parallax.
 

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

Welcome to the forum @matlstria
 
There is a known regression with ScrollTrigger from animations, which will be fixed in the next version. In the meantime, please add lazy: false to your from animations.
gsap.from('footer', { opacity: 0, duration: 2, lazy: false, scrollTrigger: 'footer' })  

That demo is from a really old thread. Try updating to v3. 😉
 

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

Well, you have 2 touch actions going on there, swiping and scrolling, so unless you move your finger perfectly up and down in a straight line, it might trigger the slider swipe. You can probably increase the minimumMovement on the Draggable so it's not so sensitive.
 
 

Hey violacase,
 
You will need to import the plugin...
import { gsap, DrawSVGPlugin } from "gsap/all"  

Welcome to the forums @DabeDotCom
 
I think what you're looking for is repeatRefresh 😉
 
 

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

Hi AraAbc,
 
You can't tab to something that has an opacity of 0 or the visibility is hidden, but even if you could, it would not change the scroll position because your links are essentially sitting on top of each other.
 

H pattocheu,
 
We can't really troubleshoot a live site like that. All GSAP is doing is querySelectorAll under the hood. You can console log your targets out, and if it's an empty node list, that's what can't be found.
 
console.log("my target", document.querySelectorAll(".foo"));  

It's supposed to be scrollTrigger with a lowercase s.
 
gsap.to(".foo", { scrollTrigger: "..." })  

I noticed several issues, like you had auto misspelled for the body height, and there is no moredeepTrigger element. Perhaps you are looking for something like this? I just add a refresh call right after the page becomes scrollable.
 

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

Welcome to the forums @finoz
 
You just need to create them in the order they appear in the DOM, so maybe something like this?
 

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

Welcome to the forums @alvsys
 
Your useEffect needs an empty array on the end, otherwise it will recreate the animation on every state change. Be sure to check out our React guide.
 
 
 

NextJS does not support ES Modules so you'll need to use the UMD files located in the dist folder.
import { ScrollTrigger } from "gsap/dist/ScrollTrigger"  

Hi hkdesigner, 
 
You're animation does not know about the changes you made on resize. I would just create a new one like this.
 

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

Just do it like you did with the other stuff.
 
ScrollTrigger.matchMedia({ "(min-width: 600px)": function() { gsap.utils.toArray(".scroll-trigger").forEach(element => { if (element.classList.contains("colors-section")) { createColor(element); } if (element.classList.contains("text-fade-in-out")) { createFadeInOut(element); } if (element.classList.contains("text-animate")) { createTextAnimate(element); } }) }, "(max-width: 599px)": function() { gsap.utils.toArray(".scroll-trigger").forEach(element => { if (element.classList.contains("colors-section")) { createColor(element); } }) } });  
And you may need to use saveStyles.
 
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.saveStyles()
 

Welcome to the forums @Antdev
 
You can cannot combine different types of Draggables like that. There can only be 1 Draggable instance per element, so your rotation one just gets killed off. You can designate a place on your element to do rotation as shown in this thread.
 
 

Hi joris,
 
Have you checked out our loop helper function?
 
https://greensock.com/docs/v3/HelperFunctions#loop
 
You could probably just use that and then add in a wheel listener. Just a quick example. The only thing I had to change in the helper function is to add the draggable instance to the timeline it returns.
 

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

Hi nag,
 
You need to kill your ScrollTriggers in beforeDestroy() or the equivalent of that if you're using the latest Vue.
 
ex.
ScrollTrigger.getAll().forEach(t => t.kill());  
 

Hi Alexander,
 
You can put a condition inside your onUpdate to return if it's open.
 

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

Hi fonventon,
 
You should create your timeline outside of your event handler, and then just play and reverse it. You will of course need to create a loop to do that...
 

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

Not really. Locomotive scroll isn't a GSAP product so we don't officially support it over here. And to be honest, I've never used to I wouldn't even know where to start. It seems very finicky and sometimes fails to start up correctly. Like sometimes when I reload it and there's a huge scrollbar.
 

 
 
Maybe try another smooth scrolling library or the that's built on top of ScrollTrigger.
 

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