OSUblake

You'd have to normalize the end values based on some constant that you like. 
let scrollSpeed = 3500;  
And then something like this should give you constant speed.
end: () => `+=${scrollSpeed * (maxWidth - window.innerWidth) / scrollSpeed }`  

Welcome to the forums @big aaron
 
this.images is an array of JavaScript objects for the urls. Your animations need to target the actual image elements. If you can make a minimal demo we can look at it. You can fork this CodeSandbox. Just make it as basic as possible. 
 
https://codesandbox.io/s/gsap-nuxt-starter-r5lkg
 

Welcome to the forums @NickPish
 
You can convert that into a timeline, and then add empty space on the end of the timeline like so. Just adjust the position parameter to get the spacing you need.
 

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

You need to create your animation outside of the handler. Then you can toggle the reversed state of the animation like so...
 

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

Hi Michael,
 
Have you seen the new Observer plugin? You can simply some of your event handling with it. 😉
 
https://greensock.com/docs/v3/Plugins/Observer
 
As far as the rotation goes, you'd have to do some math to get it to work correctly, kind of like what is shown in this post for making a generic directionalRotation plugin. The code in that pen that is inside the if statement for short is what you would need to do.
 
 
Or just use the built-in directional rotation, but you'd need to use a regular tween.
 
gsap.to(this.elRotation, { rotation: `${degree}_short`, overwrite: true })  

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

Yeah, it's just an oversite, and I'll add a window to the DOMTarget for the next release.

Yeah, that sounds like the correct behavior. There's really no way to normalize that, so you would have to manually listen for events and do the scrolling yourself. You could definitely leverage the new Observer plugin to help out. Just a quicky demo showing how. 
 

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

You really can't use fit like that by passing in a scrollTrigger. However, you can still use fit to get the values you need. 
 

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

Welcome to the forums @Studio7
 
To prevent it from looping, you just need to get rid of the wrapForward/wrapBackward calls.
 
onUpdate(self) { if (self.progress === 1 && self.direction > 0 && !self.wrapping) { // wrapForward(self); } else if (self.progress < 1e-5 && self.direction < 0 && !self.wrapping) { // wrapBackward(self); } else { scrub.vars.totalTime = snap((iteration + self.progress) * seamlessLoop.duration()); scrub.invalidate().restart(); // to improve performance, we just invalidate and restart the same tween. No need for overwrites or creating a new tween on each update. self.wrapping = false; }  

See the Pen PoEgOOm by GreenSock (@GreenSock) on CodePen
 
But that's a rather complicated demo to learn from. It might be easier to start out small and build up to what you want following this article. And, of course you can ignore the looping parts, but the animations might still be helpful.
 
Going “Meta GSAP”: The Quest for “Perfect” Infinite Scrolling | CSS-Tricks - CSS-Tricks
 

Welcome to the forums @Vinicius Eidy
 
You can use your ScrollTrigger's callbacks like onEnter, onLeave, onEnterBack, and onLeaveBack to custom whatever you want. It's very similar to this answer. @akapowl is changing the classList property of an element. Same basic concept.
 
 
 

I think the demo just needed the beta version of ScrollTrigger 3.10.4.
 
https://assets.codepen.io/16327/ScrollTrigger.min.js
 

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

Welcome to the forums @Eduardo Muramoto
 
Just call ScrollTrigger.refresh() to update ScrollSmoother.
 
 
No, but maybe we add a way to do that in the future. Here's just a quicky example of how you could do that by making your own custom add/remove listener.
 
https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-forked-irmojq?file=/pages/_app.js
 

You need to use a relative value to add 360 degrees to the current rotation. They way you currently have it, it will only rotate to 360 degrees and then restart.
 
gsap.to(".square", { rotation:"+=360" });  

Hi WaReZor,
 
Your toggle action is resetting the animation on leave, so there is nothing to reverse. You're already at the beginning.
 
If I understand your goal correctly, you will probably have to make another animation when entering back, kind of like this.
 

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

Doing that will behave the same way as your initial demo. $.fn is just a way to add a method to jQuery's prototype.
 
 
You can add whatever you want to whatever you want. JavaScript is pretty relax in that regards, so you can add an animation to an element, object, etc.
 

See the Pen dyJwxye by GreenSock (@GreenSock) on CodePen
 
For more help with JavaScript, I would recommend checking out Wes Bos' JavaScript course. Most of your questions are really just general JavaScript scoping questions.
 
https://wesbos.com/javascript/03-the-tricky-bits/scope
 

Welcome to the forums @csphilli
 
If you're using ScrollTrigger, you can use matchMedia to create your animations according to a media query.
 
https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()
 
Or maybe manually writing your own media query listener.
 

See the Pen WKpmxN by osublake (@osublake) on CodePen
 
If you're constantly calling those functions, then I'd just make the property dynamic, although I'd probably use fromTo instead of from. See the Creating from() logic issues here.
 
let axis = window.innerWidth < 500 ? "y" : "x"; gsap.fromTo(".box", { [axis]: 150 }, { [axis]: 0 });  

Correct.
 
https://greensock.com/club/
 

Sounds like you didn't include the lottie JavaScript file.
 
https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.6/lottie.min.js
 

Hi Samuel, 
 
I'd just use the regular random functions instead so the random value doesn't get recalculated.
 
.from('#div0', { duration: 1, xPercent: gsap.utils.random(-400, 400), yPercent: gsap.utils.random(-400, 400), rotation: gsap.utils.random(-25, 25) })  

Just a quick note that version 3.10.3 has been released, so please try testing with the new files.

Hi Oleh,
 
Can you try with these files, at least locally? That issue should be fixed now.
 
https://assets.codepen.io/16327/ScrollTrigger.min.js
https://assets.codepen.io/16327/ScrollSmoother.min.js
 

Welcome to the forums @Habib Hadjar
 
If you're talking about the initial animation, that's just a new feature of React 18. 😉
 
 
I would suggest either getting of strict mode, or using fromTo animations instead of from. 
 

Hi Jordanruan,
 
As we state in the forum guidelines we don't have capacity to investigate, recreate or explain how to create custom effects found on other websites. To do an effect like that, you would first need to create the bottle with something like three.js. Once you have that done, animating is pretty straightforward.
 
 

Welcome to the forums @ARNM
 
There should be no difference between those, but if you're changing routes, you need to kill those ScrollTriggers. Also, I would recommend not animating the position of your triggers. Use a wrapper instead.
 
useLayoutEffect(() => { ... return () => ScrollTrigger.getAll().forEach(t => t.kill()); }, []);  
If you need more help, please provide a minimal demo. You can use CodeSandbox for React.
 

Welcome the to forums @Chromium
 
 
You are correct in thinking that IDs must unique. I also think you might be overthinking this problem a bit. Just set the IDs in your loop. You're practically doing the same thing with your fill attribute.
 
Sorry, I had a hard time reading that jQuery, so I did it all vanilla. I also added a little uniqueId function so you can get a unique ID from anywhere in your code.
 

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