Rodrigo

Hi, Your example is not working because the imports are not pointed to files that actually exists (they rely on having the npm packages installed which is not available in codepen) and a relative path to a CSS file. Please fork this example to create a demo: https://stackblitz.com/edit/gsap-react-basic-f48716 Also we strongly recommend using GSAP Context (as mentioned on the resources in the page @mvaneijgen linked) in React setups, especially the scope utility that could come in handy on this case. Hopefully this helps. Happy Tweening!

Hi @sharafa, Just to confirm, wasn't this resolved by @mvaneijgen in this thread?: Happy Tweening!

Hi, Unfortunately I'm having a few issues trying to follow exactly what's going on in your code, especially in the stepsTimeline update method. Instead I created this example that shows what IMHO is a simpler way to achieve this: https://codepen.io/GreenSock/pen/jOQEYqX Hopefully this helps. Happy Tweening!

Hi, This is basically about adding an extra instance to the timeline after the loop that takes all the elements that extra step forward, soto speak. I'm having a few issues trying to follow your code, it's almost 250 lines and I'm not sure what is doing what exactly. To give you some idea it should be something like this: const tl = gsap.timeline({ // Timeline and ScrollTrigger Config Here }); elements.forEach((element, index) => { // Your loop stuff here }); // After the loop add a final instance to the timeline // that moves everything to the final position tl.to(elements, { // Config here }); Hopefully this helps. Happy Tweening!

Hi, I think the best approach in this case is to use React Context to create a provider that updates a property. This property (a boolean that is set as false in the context) gets updated in the loader component once the animation is completed. You watch for changes in the App component and run a regular effect hook. Something like this in your App file: const { loaderCompleted } = useContext(loaderContext); useLayoutEffect(() => { if (!loaderCompleted) return; // Loader has completed, now create your GSAP Context const ctx = gsap.context(() => {}); return () => ctx.revert(); }, [loaderCompleted]); You can learn more about React Context here: https://react.dev/reference/react/createContext https://react.dev/reference/react/useContext Hopefully this helps. Happy Tweening!

Hi, In Stackblitz there is no need for .npmrc files, just use the GSAP Trial package: npm install --save gsap-trial Here is an example of a React app using the ScrollSmoother Plugin without any issues: https://stackblitz.com/edit/react-iqmjfx Hopefully this helps. Happy Tweening!

Hi, I just wrapped that section around an element with overflow hidden and it seems to work as expected on my devices: https://codepen.io/GreenSock/pen/YzRPrdb Here is the example without iframes: https://cdpn.io/pen/debug/YzRPrdb Finally the box-sizing property, ideally should be global and not just applied to the body element: * { box-sizing: border-box; } body { margin: 0; padding: 0; } Hopefully this helps. Happy Tweening!

Hi, The code you already have in place is quite simple and easy to follow actually, so I don't think it can be better. Maybe use a loop but that could complicate things a bit further. Since you only have 3 sections there is no harm in have a bit of redundancy there, especially with that amount of code. Happy Tweening!

Hi, By default some methods of Tweens/Timelines instances, when pass a position parameter (time/label) suppress events and callbacks by default when moving the instance's playhead around. So when you call play() after the seek event is expected to have those callbacks fired because you create the timeline, then you move the playhead with the seek() method to 3 seconds, then you add the callbacks, after moving the timeline's playhead, and finally you just change the paused state with play(), so at that point the instance will call all the callbacks as you're seeing right now. That's why adding those extra seek() methods before calling play() is working, because you're moving the timeline's playhead around before toggling it's paused state and after adding those callbacks. Those callbacks will be ignored when you toggle the paused state. This also will work the way you intend: tl.addPause(10); tl.seek(3); document.getElementById("#btn-register-cb").addEventListener("click", () => { tl.add(() => { console.log("callback at 1s"); }, 1); tl.add(() => { console.log("callback at 3s"); }, 3); tl.add(() => { console.log("callback at 5s"); }, 5); tl.seek(2.9999); }); document.getElementById("#btn-start-timeline").addEventListener("click", () => { tl.play(3); }); This also will work in the way you're expecting: tl.addPause(10); document.getElementById("#btn-register-cb").addEventListener("click", () => { tl.add(() => { console.log("callback at 1s"); }, 1); tl.add(() => { console.log("callback at 3s"); }, 3); tl.add(() => { console.log("callback at 5s"); }, 5); tl.seek(3); }); document.getElementById("#btn-start-timeline").addEventListener("click", () => { tl.play(); }); Because you're moving the playhead after adding those callbacks, not before, so those callbacks will be ignored. Hopefully this makes sense and helps. Let us know if you have more questions. Happy Tweening!

Hi @Milan Parmar and welcome to the GreenSock forums! The link you provide is broken so there is nothing we can see there. I'd suggest you to check the ScrollTrigger Docs in order to understand and know how the plugin works: https://greensock.com/docs/v3/Plugins/ScrollTrigger Also take a look at this demos: https://greensock.com/st-demos/ And this codepen collections: https://codepen.io/collection/AEbkkJ https://codepen.io/collection/DkvGzg If you have any questions, remember to include a minimal demo that shows what you have and clearly illustrates the issue you're having. Hopefully this helps. Happy Tweening!

Hi, A few lines of code doesn't tell us exactly what could be wrong, but keep in mind that the setActive method you created is going to run twice. One for the ScrollTrigger instance leaving and another for the one entering. Maybe this could be better: elements.forEach((el) => { gsap.to(el, { scrollTrigger: { start: "top top", end: "bottom top", onToggle: () => el.classList.toggle("active"), }, }); }); But again, without a minimal demo there is not much we can do. Hopefully this helps. Happy Tweening!

Hi, That will depend on how your useEffect/useLayoutEffect is setup as described in the React docs: https://react.dev/reference/react/useEffect#my-cleanup-logic-runs-even-though-my-component-didnt-unmount Hopefully this helps. Happy Tweening!

Hi @dazzafact2 and welcome to the GreenSock forums! You're looking for the second parameter in the seek() method, called suppressEvents: https://greensock.com/docs/v3/GSAP/Timeline/seek() The same applies to the play() and other similar methods: https://greensock.com/docs/v3/GSAP/Timeline/play() const tl = gsap.timeline(); // Jump to 3 seconds and execute any callbacks or methods tl.seek(3, false); Hopefully this helps. Happy Tweening!

Hi, Adding to Cassie's great advice, I'd like to know what is not working exactly? If you want to prevent the click handler to run on an element when another is already active, you can just create a boolean and store it in a ref so it's preserved through re-renders. Other than that I don't see anything wrong with your code, besides the fact that you're not using GSAP Context and you're not cleaning up in your effect hook. Happy Tweening!

Hi, Definitely, you can use the disable method in ScrollTrigger: https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable() For timelines yo can use the invalidate method: https://greensock.com/docs/v3/GSAP/Timeline/invalidate() Hopefully this helps. Happy Tweening!