Leaderboard

GSAP is smart and on page load calculates everything it needs to do the animation, so that when it is time it to animate it doesn't need to do calculations anymore. In your case you have two ScrollTrigger animating the same element, so both of them see the initial state of your gradient and record that and when it is time they animate from that initial state to their new state. You want the second ScrollTrigger to wait until the first one has finished. You could do this multiple ways, but the easiest is to give the second tween immediateRender: false, so that it waits until it needs to do the animation. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/RwOgqJj?editors=0010

Thx for the answer. Setting ScrollTrigger.normalizeScroll(true)Solved the problem.

Thank you so much @mvaneijgen! This helps tremendously 😄

That sounds like it could simply be a consequence of the fact that most modern browsers handle scrolling on a completely different thread than the main JS thread, thus it renders the content as if it was scrolled (without any ScrollTrigger logic applied) first, and THEN when the JS thread executes, ScrollTrigger does what it must do to pin the element, making it look like it jumps back. Two things you can try (assuming that's the problem you're noticing): 1) Try setting ScrollTrigger.normalizeScroll(true) which forces all the scrolling to occur on the main thread. 2) Use a scroll smoothing library like ScrollSmoother or Lenis which accomplishes a similar thing, unhooking the native scroll and implementing JS-based scrolling instead.

Hi @nav and welcome to the GSAP Forums! Yeah it seems that some images were lost at some point with the domain change (from greensock.com to gsap.com). Basically a placeholder with a silhouette was in front of each image. For now I forked that demo with a placeholder instead for each card so you can see the effect https://codepen.io/GreenSock/pen/PoqRZOB Happy Tweening!

Hi @nzetala and welcome to the GSAP Forums! I just tested your demo in the latest chrome and firefox on Ubuntu 20 & 22 and I can't seem to reproduce the issue 🤷‍♂️ The right section with the pictures remains pinned regardless of how fast I scroll up and down. Maybe you can check the fastScrollEnd config option as @Carl explains here: https://gsap.com/blog/3-8/#preventoverlaps-and-fastscrollend Happy Tweening!

Hi, @akapowl one of the forums superheroes created this nice demo using locomotive that you can check: https://codepen.io/akapowl/pen/wvJroYy Happy Tweening!

Amazing, thanks - good to know I solved the issue slightly differently where I only pinned the left side of the split content. However, I prefer this solution as it's less fussy! Thanks again

Yes just create an animation that animates the thing on the x-axis and then hook it to ScrollTrigger, then just add ScrollSmoother to the page and you're done. Here is an example. But I would just build it from scratch and just tackle one part at a time, first your layout with CSS then the animation, add ScrollTrigger to the animation and then at last add ScrollSmoother (keep in mind this plugin is only accessible for our members, but you can freely use them on things like Codepen to test them out!). If you still need help please provide a minimal demo with what you've tried and someone here will be happy to point you in the right direction. https://codepen.io/GreenSock/pen/dydpJzY?editors=0010

Hi, Just with CSS I'm not aware, but I'm far from being a CSS wiki so take my word with a giant grain of salt since most likely is possible, I'm just ignorant on the fact. But with GSAP is super easy though: gsap.set(slider, { width: slider.scrollWidth, }); Here is a demo: https://codepen.io/GreenSock/pen/bGJpOoQ Hopefully this helps. Happy Tweening!

Yep, as Rodrigo pointed out, there are several problems: You forgot to load/register the ScrollToPlugin (you only did ScrollTrigger). You didn't pass an empty dependency array to your useEffect(), so React will call that again and again on every render. You aren't doing proper cleanup. I'd strongly recommend using gsap.context() to make it very easy. Read this article: You were passing a position parameter ("<0.5") to a normal tween which is invalid. That's only for when you're placing something into a timeline. I'm not exactly sure what you were trying to accomplish there, but if you want to make the animations delay their start time for 0.5 seconds, just set delay: 0.5 in your tween(s). You used a capital "P" in "Power4.out" which is incorrect. It should be "power4.out" or just "power4" because "out" is the default type. So your code could look like: import gsap from "gsap"; import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'; import { ScrollToPlugin } from 'gsap/dist/ScrollToPlugin'; gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); // (or in the top-level file in your React app) useEffect(() => { let ctx = gsap.context(() => { gsap.to(".scroll_footer_section", { duration: 0.2, bottom: 50, delay: 0.5 ease: "power4.out", }); gsap.to(window, {duration: 2, scrollTo: 400, delay: 0.5}); }); return () => ctx.revert(); // <-- cleanup! }, []); // <- empty dependency Array I hope that helps.