Leaderboard

Yes! The batch() method is totally worth it. Many thanks GreenSock Team.

Hi, The issue could stem from the fact that you have a duplicated set of buttons: <div class='selector-container'> <ul class='selectorX'> <li class='lists'>1</li> <li class='lists'>2</li> <li class='lists'>3</li> <li class='lists'>4</li> <li class='lists'>5</li> <li class='lists'>6</li> <li class='lists'>7</li> <li class='lists'>8</li> </ul> </div> <div class='selector-container'> <ul class='selectorX'> <li class='lists'>1</li> <li class='lists'>2</li> <li class='lists'>3</li> <li class='lists'>4</li> <li class='lists'>5</li> <li class='lists'>6</li> <li class='lists'>7</li> <li class='lists'>8</li> </ul> </div> That returns a index value that is double of the expected here: buttons.forEach(function (button, i) { button.addEventListener("click", () => { const target = i * 0.125; gsap.to(progressX, { value: target, duration: 1 }); }); }); That being said we're circling back to an issue that Cassie already mentioned and, for which, you were warned about: You're creating and updating different threads trying to get a faster response. That's not the way it works. We provide as much support as we can with the time resources we have. I was going to look into your other thread today and that is exactly what I did, so as you can see you got an answer and I pointed to an actual issue when I had the time to do it. This is related to this thread it seems: Also is worth noticing that most of the issues with this project stems from logic and copy/pasting something without knowing exactly how it works and without putting the effort of understanding the code. This last problem of a duplicated list of items is a clear proof of that. We understand the pressure of a deadline and the frustration of a project not working as such deadline approaches, but we can't share the responsibility of users getting in projects that exceeds their capabilities. I strongly recommend you to learn more about Javascript and web development in general, this youtube channel has great resources for that: https://www.youtube.com/playlist?list=PLWKjhJtqVAbleDe3_ZA8h3AO2rXar-q2V Happy Tweening!

I think that is a wonderful starting point. Thanks a lot for everything, @akapowl

Hi there! Just some numbers that GSAP is struggling to tween between. If you make them all percentages it works fine. It's hard for GSAP to animate between 0 and 100% as they're different units. timeline.fromTo( ".home__text span", { y: 30, clipPath: "polygon(100% 100%, 0% 100%, 0% 100%, 100% 100%)" }, { y: 0, clipPath: "polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%)", duration: 0.8, stagger: 0.2, } );

Hi there - Looks like you're trying to pin elements using position 'fixed' inside a transformed container. This isn't a GSAP bug - just a browser limitation. You can use pinType: 'transform' to fix this. Also just a heads up that we have our own scroll smoothing plugin that works around a lot of annoying edge cases and browser bugs. https://greensock.com/scrollsmoother/

Hi there. Your ScrollTrigger is set to end 10,000 pixels after it starts - but since you are not pinning anything, you will never actually have that much height to scroll through on your page. So you might want to change something with that regard. In this fork of your pen you can see that ScrollTrigger actually works just like you tell it to, if there is enough scrollable space; I just set a min-height to the body to demonstrate that. https://codepen.io/akapowl/pen/dyjKGVX Consider having another look at the ScrollTrigger docs - with regard to end it might also be helpful to have a look at endTrigger. https://greensock.com/docs/v3/Plugins/ScrollTrigger Also it sounds to me, that you actually want two tweens of a timeline to trigger at the same time, so you might want to have a look at how to use the position parameter of tweens on a timeline.

Update: I also tried to make an example that is a bit more condensed, to make it at least a little bit easier to see through what's going on there. @Rodrigo would you mind having a look at this if you find the time, to see if this is somewhat acceptable from the React side of things? https://codesandbox.io/s/gsap-scrolltrigger-with-locomotive-scroll-in-react-ux8nlv Worth mentioning on the side: Since elements and even whole sections kept disappearing on me when scrolling, I added a suggested sort of workaround to that known locomotive-scroll issue to the end of the styles.css

So, @Pollux Septimus, I've had some more tinkering with this, and I think I've come to a working outcome ( but since I am not too familiar with React in particular, I give no guarantee that this is the holy grail when it comes to this). Point 3) of what I mentioned still stands - do not use locomotive-scroll's data-scroll-section attribute for the reasons mentioned. Point 1) looks like it boils down to the double-rendering in React's Strict mode from v18 upwards - so just like you do with GSAP's .context(), you will need to do some sort of clean-up to prevent multiple instances of loco-scroll to be created. So now I added return () => { locoScroll.destroy() ScrollTrigger.removeEventListener('refresh', lsUpdate); } to the end of the useEffect of your custom useLocoScroll hook. Point 2) can apparently not really be avoided, but React offers you some way to workaround the problem that this boild down to. The way I understand things, you probably shouldn't be using a useEffect but rather a useLayoutEffect for your custom hook: taken from here: https://kentcdodds.com/blog/useeffect-vs-uselayouteffect Those things changed, I landed on this, which appears to be working just like intended. Does that work better for you? https://codesandbox.io/s/st-loco-react-dtw1q4

You could use the SplitText plugin and animate the words: https://codepen.io/medienbaecker/pen/yLqKEQX

Hi, i'm not exactly sure what effect you are going for. FWIW it seems a bit disorienting to move something down to a y:200 while scrolling up. That aside I would avoid creating 2 timelines initially time that control the same properties of the same thing. To avoid conflicts I would suggest creating these animations fresh when you need them inside your callbacks sort of like: ScrollTrigger.create({ trigger: ".top-page", start: "top-=100 top", end: "top+=200 top", markers: true, onEnter: () => {let tl1 = gsap.timeline({}) .fromTo("header", { y: 0, overwrite: 'auto' },{ duration: 2, y: 200, ease: CustomEase.create("custom", "0.5, 0, 0, 1"), overwrite: 'auto' })}, onLeaveBack: () => {let tl2 = gsap.timeline({}) .to("header", { scale: 1.2, y: 200, }) .set("header", {y: 200,scale: 1,},"hide") .to("header", {opacity:1},"start2") .to(("header"), { y: 0, duration: 1, ease: "power4.out" }, "start2")} }); I would also remove locomotive scroll until you know things are working fine without it. Hopefully this set up will allow you to remove some of redundancy between the 2 animations like tweening and setting y:200 multiple times. If you need more help please try to simplify the animations as much as possible in a fork of the original pen.

Hi, The issue is due to the type of animation being applied to the main container of the page. Routing/Transition libraries normally demand that there has to be only one element to be animated. Hence we wrapped everything in a single DOM node. The animation we're using actually applies transforms to that element which causes issue with pinning in ScrollTrigger. https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children" There are two possible solutions for this. Use pinReparent on all your ScrollTrigger instances that reside inside a transformed parent or set a default for all ScrollTrigger instances: ScrollTrigger.defaults({ pinReparent: true, }); If using that approach is not an option what you could do is on the transitions configuration remove all the styles applied by GSAP on the element being animated: const onEnter = (el, done) => { gsap.set(el, { autoAlpha: 0, scale: 0.8, xPercent: -100 }); gsap .timeline({ paused: true, onComplete() { toggleTransitionComplete(true); // Removes all styles (including transforms) // once the page/route transition is completed gsap.set(el, { clearProps: "all" }); done(); }, }) .to(el, { autoAlpha: 1, xPercent: 0, duration: 0.25 }) .to(el, { scale: 1, duration: 0.25 }) .play(); }; Both options are equally valid and should work without any issues. Hopefully this solves the issues you've been experiencing. If you have any other question/issue let us know. Happy Tweening!

Hi @The_Orange_Dot and welcome to the GreenSock forums! This most likely is related with React's strict mode. When using GSAP in a React app (or it's ecosystem such as NextJS and Gatsby for example) we strongly recommend using GSAP Context: https://greensock.com/docs/v3/GSAP/gsap.context() Here is a setup using React with the same markup you have and you can see it works OK: https://stackblitz.com/edit/react-d1gu6j?file=src%2Fstyle.css,src%2FApp.js Also take a look at this guide: Finally you can see these collections in order to see how to get started with GSAP in a React App: React https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters NextJS https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters Let us know if you have more questions. Happy Tweening!

You could also use once: true, if I am not mistaken. https://codepen.io/akapowl/pen/e26c8669cb90500b27e682f32259fb0a

It's pretty tough to diagnose without a minimal demo (perhaps in CodeSandbox?) but typically when I see someone using CSSRulePlugin it's almost always better to just use CSS variables instead. You can animate CSS variables with GSAP, like: https://codepen.io/GreenSock/pen/PowWgOz

Wish granted: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch()

Sure the whole point of the batchCallbacks() is that it'll feed an Array of the appropriate elements to your callback(s) so that you can do whatever you want with them (like animate them with a stagger). It's totally up to you. Feel free to use an advanced stagger or whatever you want. Did you peek at the demo? Notice there are simple gsap.to() for the enter animations, and gsap.set() for the leave ones. Tweak those tweens however you want. Does that answer your question?

Great. Just do it.

@ddi-web-team @Sygol @Yannis Yannakopoulos I whipped together a helper function that should make this quite easy. Check it out in this CodePen: https://codepen.io/GreenSock/pen/823312ec3785be7b25315ec2efd517d8?editors=0010 We may end up adding it as a static method on ScrollTrigger if there's enough interest. What do you think?