Rodrigo

Mhh.... I don't know what to tell you. When scrolling up and down it works as expected in the codepen example: https://codepen.io/GreenSock/pen/gOZeojP So there has to be something else in your setup that is causing this issue. Is worth noticing that you have some CSS animations in your styles, be sure that is not affecting/animating the same element(s) you are animating with GSAP, because that will create an issue of it's own. Happy Tweening!

Hi @issam.seghir and welcome to the GreenSock forums! This is not a GSAP related issue, but more a CSS one. It seems to me that this stems from here (taken from the MDN docs): https://developer.mozilla.org/en-US/docs/Web/CSS/container-type#values inline-size Establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element. So then the layout containment does this: Note: using layout, paint, strict or content values for this property creates: A new containing block (for the descendants whose position property is absolute or fixed). A new stacking context. A new block formatting context. The problem is in #2. The fact that creates a new stacking block creates the problem you're seeing as mentioned here: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children You can use pinType: "transform" in order to fix this: gsap.to(".ai__desc", { rotation: 360, scrollTrigger: { trigger: ".ai__main", pin: true, pinType: "transform", start: "top top", end: "+=2000", scrub: 1, markers: true } }); Hopefully this helps. Happy Tweening!

Hi, @PointC has a few good examples about this: https://codepen.io/PointC/pen/rNeQNgw https://codepen.io/PointC/pen/BaPyQdg Hopefully this helps. Happy Tweening!

Hi @ti-sign, Great work, looks really nice! Thanks for sharing your work with the community! ? Happy Tweening!

Hi, Using a combination of ScrollTrigger and the ScrollTo Plugin to scroll to a specific location, especially when you have pinned sections with ScrollTrigger is not as trivial as using the height of the elements, their offsetTop or other properties. Is always better to use ScrollTrigger in order to get the specific scroll distance using the start/end points. I checked your code for that quickly and it doesn't look like the best approach IMHO In this demo for example: https://codepen.io/GreenSock/pen/BaqbNzG The calculations are being made in line 195 in order to get the correct scroll position of each section. Granted this uses ScrollSmoother's scrollTo method, but using the ScrollTo plugin shouldn't be too different. The other issue here, as @Carl mentions, is the fact that you are animating the container of the yellow boxes on the Y axis and you are creating ScrollTrigger animations for the yellow boxes. So ScrollTrigger calculates the start and end values for those, when the parent of the yellow boxes hasn't moved yet, then you move that on the Y axis, so all the calculations are useless because the actual positions of the yellow boxes has shifted. Here is a super simple example (It should look better in a different tab): https://codepen.io/GreenSock/pen/QWzQMyv Hopefully this helps. Happy Tweening!

Hi @mixpofo and welcome to the GreenSock forums! Minor version updates never include breaking changes, just new features and, in this case of non-consecutive minor versions, quite a few bug fixes, so nothing GSAP related should break that code. My suspicion is that React's Strict Mode could be the cause of this problem. Since version 18, React calls the effect hooks (useEffec/useLayoutEffect) twice, which has caused a lot of headaches. This causes ScrollTrigger instances, for mention just one issue, to get executed twice, completely messing up the calculations in the second run, especially for pinned elements. Since version 3.11.0 we have GSAP Context in order to help with that and a lot of other situations where it's very handy: https://greensock.com/docs/v3/GSAP/gsap.context() I suggest you to check the resources in this page: As well as the starter templates we have in our Stackblitz collection: https://stackblitz.com/@GreenSockLearning/collections/gsap-nextjs-starters Here is a specific one using NextJS and ScrollTrigger: https://stackblitz.com/edit/nextjs-5cm4qn Basically your code should look like this: useEffect(() => { const ctx = gsap.context(() => { const extElements = document.querySelector("#extElements"); const tween = gsap.to(extElements, { x: () => getScrollAmount(), duration: 3, ease: "none" }); ScrollTrigger.create({ trigger: ".extWrap", start: "top 0%", end: () => `+=${getScrollAmount() * -1}`, pin: true, animation: tween, scrub: 1, invalidateOnRefresh: true, markers: false, }); }); return () => ctx.revert(); }, []); Hopefully this helps. Happy Tweening!

Hi Sam, There is a lot going on in your demo and we don't have the time resources to go through all that code and see what could be the issue. I'd suggest you to try the Flip Plugin that was made for stuff like this, especially check this demo: https://codepen.io/GreenSock/pen/NWRxarv Hopefully this helps. Happy Tweening!

Hi @Amesh Suthar and welcome to the GreenSock forums! Is really hard for us to do much without a simple minimal demo that clearly illustrates the problem (for future threads, always include a minimal demo so we can tinker with your code and help you in a faster way). In this case the issue seems to be related to that final-to-first transition, right? Lucky for us @Carl created an excellent video tutorial, blog post and demo about achieving this with staggers: Here you can find the blog post and demo: https://www.snorkl.tv/greensock-staggers-with-seamless-loops/ Hopefully this helps. Happy Tweening!

Hi @saad_shah and welcome to the GreenSock forums! Maybe these threads can provide a solid starting point: Hopefully this helps. Happy Tweening!

Hi @dmytro.kuz and welcome to the GreenSock forums! I'm afraid that is not that simple. The ScrambleText Plugin actually alters the content of the element, which means that the HTML tags and styles applied to the elements inside are gone. The only alternative is go block by block and add each ScrambleText instance to a timeline like in this example: https://codepen.io/GreenSock/pen/jOxpVw Hopefully this helps. Happy Tweening!

Hi, I'm a bit confused by the setup you have right now. You have three different loops each one creates a series of ScrollTrigger instance that animates the background color of the Navbar. Is a bit hard to follow but I'm pretty sure that you are creating conflicting instances here. It'd be far better and easier to follow/debug if you had just one loop for all your color changes and add distinctive markers for each ScrollTrigger instance that affects such behaviour. Maybe better explain why you have so many loops for doing just one thing (changing the background color of the navbar) and what's the logic behind this. Happy Tweening!

Hi, There are quite a few examples lying around in the forums regarding the approach Mitchel mentions, these are just a few: https://codepen.io/GreenSock/pen/rNrWrXN https://codepen.io/GreenSock/pen/gOWBJNq https://codepen.io/GreenSock/pen/NWdpgbJ/4a9d18b3def973c8e4e5e0d106b2e664 Hopefully this helps. Happy Tweening!

Hi, Maybe something like this could be a good starting point: https://codepen.io/GreenSock/pen/ZEVrpEv Hopefully this helps. Happy Tweening!

Hi, Here is another option: https://codepen.io/GreenSock/pen/wvRpZOp Hopefully this helps. Happy Tweening!

Hi, You could try normalizeScroll: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll() Hopefully this helps Happy Tweening!

Hi, Just run a loop and a function for the distance: https://codepen.io/GreenSock/pen/BavJEVd Hopefully this helps. Happy Tweening!

Hi @Arthur Las Casas and welcome to the GreenSock forums! @Carl's courses are highly recommended, he has over 10 years of experience with GSAP, is a great teacher and plenty of his students have shared great comments about it: https://www.creativecodingclub.com/bundles/creative-coding-club?ref=44f484 As for translating to Portuguese or having subtitlesI couldn't tell you about it. Good luck! Happy Tweening!

Hi, This is mostly about your HTML/CSS setup. I've been playing with a similar simpler setup in order to try to get a section after the one, in order to pin it over the previous section without any luck. Maybe there is a simple way but is eluding me right now. I think the simpler way is to add an element on top of the one with the horizontal section with opacity zero and visibility hidden, then show it and animate it as part of a common timeline, like this simple example: https://codepen.io/GreenSock/pen/GRPyeQb Hopefully this helps. Happy Tweening!

Hi, I had a chance to review your code and this is quite wasteful in terms of adding an active class: onUpdate: (self) => { let index = ((self.progress * 10) / 10) * 8; if (index < 1 && activeText !== 0) { activeText = 0; descriptions[0].classList.add("active"); descriptions[1].classList.remove("active"); } else if (index >= 1 && index < 2 && activeText !== 1) { activeText = 1; descriptions[1].classList.add("active"); descriptions[0].classList.remove("active"); descriptions[2].classList.remove("active"); } else if (index >= 2 && index < 3 && activeText !== 2) { activeText = 2; descriptions[2].classList.add("active"); descriptions[1].classList.remove("active"); descriptions[3].classList.remove("active"); } else if (index >= 3 && index < 4 && activeText !== 3) { activeText = 3; descriptions[3].classList.add("active"); descriptions[2].classList.remove("active"); descriptions[4].classList.remove("active"); } else if (index >= 4 && index < 5 && activeText !== 4) { activeText = 4; descriptions[4].classList.add("active"); descriptions[3].classList.remove("active"); descriptions[5].classList.remove("active"); } else if (index >= 5 && index < 6 && activeText !== 5) { activeText = 5; descriptions[5].classList.add("active"); descriptions[4].classList.remove("active"); descriptions[6].classList.remove("active"); } else if (index >= 6 && index < 7 && activeText !== 6) { activeText = 6; descriptions[6].classList.add("active"); descriptions[5].classList.remove("active"); descriptions[7].classList.remove("active"); } else if (index >= 7 && activeText !== 7) { activeText = 7; descriptions[7].classList.add("active"); descriptions[6].classList.remove("active"); animationCompleted = true; // Status-Variable console.log(animationCompleted + ": wurde umgestellt"); } } Running all that on every update of ScrollTrigger is quite excessive IMHO. The approach in these examples seems better: https://codepen.io/GreenSock/pen/jOQEYqX https://codepen.io/GreenSock/pen/oNQNrQx Hopefully this helps. Happy Tweening!

Hi @jessicsw and welcome to the GreenSock forums! Given the current setup you have I don't know what can be improved. I tested in a very old laptop (10+ years) and I don't see any jittering. Since the helper function is optimized enough already. What you could try is use will-change: transform for the <li> element: https://stackblitz.com/edit/gsap-react-basic-f48716-ro4uan?file=src%2FApp.js,src%2Fstyle.css Beyond that I don't know what else can be done. Regarding the current approach you have, it seems to work very well, so I wouldn't change anything as long as it works as expected: If it ain't broken, don't fix it Hopefully this helps. Happy Tweening!

Hi, This example should provide a good starting point: https://codepen.io/GreenSock/pen/xxEQNBB Hopefully this helps. Happy Tweening!

Hi, I'm on my phone now so I can't really fiddle with your codepen example. At a quick glance it's odd to me that you're doing all those checks to see if an element is in the viewport or not . Why not use ScrollTrigger for that? https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.isInViewport() Also ScrollTrigger has a once configuration that allows you to setup an animation that runs only once when scrolling down: once Boolean - If true, the ScrollTrigger will kill() itself as soon as the end position is reached once. This causes it to stop listening for scroll events and it becomes eligible for garbage collection. This will only call onEnter a maximum of one time as well. It does not kill the associated animation. It's perfect for times when you only want an animation to play once when scrolling forward and never get reset or replayed. It also sets the toggleActions to "play none none none". Hopefully this helps. Happy Tweening!

Hi, No problemo, we have you covered! GSAP's all mighty ScrollTo Plugin: https://greensock.com/docs/v3/Plugins/ScrollToPlugin Check the demos in the plugin's docs and let us know if you have any questions. Hopefully this helps. Happy Tweening!

Hi, Most likely you'll have to clear the Timeline in order to add the instances again and restart it. Another option could be to add a new instance for the new elements to the timeline using an approach similar to the one @Carl teaches in this video: Here is a very old example I made over 6 years ago of an endless marquee in PIXI: https://codepen.io/rhernando/pen/bWYgzb Other alternative is to clear the timeline and create the timeline child instances again with the new elements. If you check my example you can see that I'm using relative values, but definitely this could cause a jump for the initial setup. The example also uses V2 syntax so you'll have to update it. Also it uses the modifiers plugin instead of the Endless Loop helper function. For what you describe this is not the simplest thing to achieve and we don't have the time resources to provide complex solutions like this to our users. Hopefully this helps. Happy Tweening!

Hi, Maybe the video and demo by @Carl in this thread can help: Happy Tweening!