Rodrigo

Hi, This most likely has to do with the fact that you're making the reparenting of the elements (updating the DOM) in the onDrag callback. If I was you I'd do that in the onDragEnd and during the onDrag I just move the other elements around. In this cases is quite simple since they move a specific amount of pixels up/down (the height of the element being dragged. If all the elements have the same height is even easier. Also you should try using Draggable's hitTest method in order to check if the dragged element is overlapping another from the collection: https://gsap.com/docs/v3/Plugins/Draggable/static.hitTest() Unfortunately I didn't had time to create a demo with my approach since this is not the simplest thing to achieve (not the most complex though, but definitely not simple), but hopefully this somehow helps. Happy Tweening!

Hi, I never tried something like that, but the first thing it comes to my mind is to use the ScrollTo Plugin in order to create a GSAP Tween that animates the scrolling from the top of the page to the bottom (you can pass a "max" value to the plugin to indicate that): https://gsap.com/docs/v3/Plugins/ScrollToPlugin Then you can use a Draggable instance to update the progress of that tween that handles the scroll for you, like this demo: https://codepen.io/GreenSock/pen/dyLaGGP Hopefully this helps. Happy Tweeing!

Hi, In your original demo you had both toggleActions and scrub in your ScrollTrigger configuration. It has to be one or the other, but definitely not both, since they pretty much don't work together. From the ScrollTrigger docs: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". I'd assume that Jack picked scrub over toggleActions, since your demo was scrubbing, but most definitely I can't read his mind! 😉 Hopefully this clear things up. Happy Twening!

Hi @Rushikesh and welcome to the GSAP Forums! You should check our Horizontal Loop helper function: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Check these demos using the Observer Plugin and ScrollTrigger: Observer Plugin https://codepen.io/GreenSock/pen/zYaxEKV ScrollTrigger https://codepen.io/GreenSock/pen/GRwePYw Here is a demo of the horizontal loop in React: https://stackblitz.com/edit/vitejs-vite-cljwjs?file=src%2FApp.jsx This one uses the Observer Plugin https://stackblitz.com/edit/vitejs-vite-auctqy?file=src%2FApp.jsx Hopefully this helps. Happy Tweening!

Hi @justintime and welcome to the GSAP Forums! Maybe using this tool: https://matthewlein.com/tools/ceaser And comparing that with our Ease Visualizer you'll be able to find what's closer to that particular easing function: https://gsap.com/docs/v3/Eases The closest one seems to be power1.inOut, but you can also use our Custom Ease tool for that (you can check in the Ease Visualizer how to use it). You can add the Custom Ease tool super easy by following this installation instructions: https://gsap.com/docs/v3/Installation?tab=npm&module=esm&method=private+registry&tier=free&club=false&require=false&trial=true&ease=CustomEase Hopefully this helps. Happy Tweening!

Hi @Mitiss and welcome to the GSAP Forums! What specific file should we be looking at? There are several files there and we don't have the time resources to comb through an entire repo trying to find errors and issues. If you can direct us to the specific file it'd be great. If possible create a minimal demo on Stackblitz without uploading a repo. We understand that creating the demo from a repo is super simple and fast, but that limit us on forking the demo since we have to fork the entire repo and that is not as simple as creating the stackblitz project. Finally Lenis is not a GSAP product so we can't offer support on that, we have ScrollSmoother for smooth scrolling effects, which is fully integrated with ScrollTrigger. But we still don't know if this is a ScrollTrigger or Lenis issue, se we can't tell you at this moment. Once we can isolate what the issue is and where is happening, we'll be able to move forward wit this. Happy Tweening!

Hi @xtinepak and welcome to the GSAP Forums! That's more in the realm of the Observer Plugin actually: https://gsapcom.tempdns.net/docs/v3/Plugins/Observer/ Here is a simple demo: https://codepen.io/GreenSock/pen/XWzRraJ Hopefully this helps. Happy Tweening!

No problemo! 👍 Let us know if you have any other question!

Hi, Yeah this is not the easiest thing to achieve. Luckily @ceribbo was super kind to share a solution for a similar situation with the community in this thread: Hopefully it helps you and if it does, remember to thank @ceribbo for it. Happy Tweening!

Hi, Is great to hear that you were able to solve it! 🥳 The site looks amazing, really nice animations and story telling, excellent job 👏 Happy Tweening!

Hi, The main issue here is that the height of the element is updated after the reactive property is changed, because of this the height of the element is not the correct one right after changing the value, you need to be sure that the DOM has been updated properly. For that you can use Svelte's tick method: https://svelte.dev/docs/svelte#tick Something like this: const handleClick = async() => { i++ if (i >= 3) { i = 0 } loginUserStore = state[i] const height = instance.clientHeight; await tick(); gsap.set(instance, { clearProps: "height" }); gsap.from(instance, { height: height, ease: "power1.inOut", }); } What that code does is to update the reactive properties, then get the current height of the element (before the DOM is updated), then wait for the DOM to be updated and finally animate the element from the height it had before the update. Here is a fork of your demo: https://svelte.dev/repl/bd10a0741c8b4aaa8664b11357a0e678?version=4.2.15 Finally I would suggest you to check the Flip Plugin for this, but since you're just starting it might be a good idea to get a good grasp of what that code is doing before moving onto more complex stuff. Hopefully this helps. Happy Tweening!

Sorry I don't understand what you mean with this: As I mentioned before a code snippet or a video doesn't really tell us what the problem is. GSAP Helper already pointed you to our starter templates on Stackblitz for React and Next: React (please read this article!) Next Also please create a demo that is as simple as possible, don't create an exact copy of your demo and add a description of your issue as clear as possible in order to understand what the problem is. Happy Tweening!

Hi, You can use the Horizontal Loop helper function and change the timeScale property in order to change the direction, as shown in these demos: https://codepen.io/GreenSock/pen/zYaxEKV https://codepen.io/GreenSock/pen/GRwePYw Here you can find more on the helper function: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Hopefully this helps. Happy Tweening!

But when the dependency is updated, the entire hook runs again and you have some lingering GSAP instances that are pointing to an element that is not rendered yet because of the useEffect/useLayoutEffect double call React does on Strict Mode. The useGSAP hook will revert only in the initial call of the hook but not when the dependencies are updated, why? Because we wanted to give users the opportunity to put all their logic in the useGSAP hook instead of creating a useGSAP and a useEffect hook, but not every time you need to re-run some logic because of a state/prop change you need to revert and re-create your GSAP instances, enter revertOnUpdate. With that useGSAP will not only run your logic inside the hook on a state/prop update but also revert and re-create your GSAP instances. Hopefully this clear things up. Happy Tweening!

Try not to think so much in terms of correct or incorrect, right or wrong. What I suggested was predicated in moving some things outside the GSAP Context scope that maybe don't have to be there, that's all. I was pointing to the fact that you have other options. This boils to personal preference, I like to keep my code as simple as possible while, ideally, avoid methods with large chunks of code that could be difficult to read some time later. You have to find the way that works for you in the best way, nothing more. If your previous code makes more sense to you and works as expected, then use it. If your last code does that, then use that. There is nothing wrong with your first code, with the SplitText instances and the loop inside the GSAP Context scope, that is going to work as you expect, as I mentioned before I was offering some insight that could be useful down the road at some point. Happy Tweening!