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!

This is possible but requires a bit of custom logic, you should expand from this demo @mvaneijgen already posted: https://codepen.io/GreenSock/pen/oNQPLqJ You basically have to keep track of every card when is at the top of the viewport and then enable the observer plugin in order to animate the elements of each card. Another possibility is to keep everything in a single timeline and scrub the content of the stacked cards as well as the card stacking. In that scenario you should create the animation first and then add ScrollTrigger to the mix. Unfortunately we don't have the time resources to make this for you. We offer paid consulting services and you can also post in the Jobs & Freelance forums to get help there. Happy Tweening!

Hi, Yeah having small elements (not enough height) will definitely be an issue because the way browsers handle wheel event the amount of pixels of each wheel event is more than the height of those elements. Maybe you should consider the Vertical Loop helper function in combination with the Observer Plugin, as shown in this demo: https://codepen.io/GreenSock/pen/KKYbeKL You can set an onComplete callback to add the active class to the target element. Hopefully this helps. Happy Tweening!

Hi, Sorry about the issues but it shouldn't be anything GSAP related. We haven't published any updates in over 3 months so if you haven't changed the GSAP/ScrollTrigger versions you're using I can't think of anything on our end that could be causing this. If that would be the case we'd be flooded with threads in that regard and a horde of angry users complaining about it 😉. If possible remove some CSS elements, other plugins you could have in your Wordpress app or maybe check some styles of your theme. Unfortunately there is not a lot we can do without a minimal demo and I have very little experience with wordpress in order to be able to identify this as an issue I've seen before. Sorry I can't be of more assitance. Happy Tweening!

Sure! Keep in mind that everything in GSAP (with the exception of our useGSAP hook and PIXI Plugin) is framework agnostic, so we thrive in performance, KB size and flexibility. We don't aim to put constraints for our users or make them code through a bunch of hoops in order to make their code work, we want that they can write their code and that it just works. That's why GSAP Context has the add() method. You can create your context and if you want to create a GSAP instance in a method that you need outside the scope of the GSAP Context instance you can add that instance using the add method: let ctx; ctx = gsap.context(() => {}); const myMethod = () => { // Some logic here ctx.add(() => { // More GSAP instances here }); }; // Then later on your code ctx.revert();// Easy cleanup of EVERYTHING If you want to have some custom logic outside GSAP Context is fine, no problem there. Happy Tweening!

Yeah the issue could be that the fact that the boolean on your state is updated that doesn't necessarily means that the elements are rendered yet, especially when you run that ScrollTrigger.refresh() method. Any particular reason for that? I don't really see any reason for having that code in that component. Removing that single line seems to fix the issue. As far as I can tell there is no real need to have that refresh call there, since when that component is unmounted the useGSAP hook will revert everything inside of it, so there shouldn't be any reason to globally refresh ScrollTrigger, unless there are other ScrollTrigger instances in your parent component, but still if you need it you can add the revertOnUpdate option to the useGSAP hook to revert everything: useGSAP( () => { if (feedLoaded) { ScrollTrigger.refresh(); // rest of your code } }, { scope: curatorContainer, revertOnUpdate: true, dependencies: [feedLoaded], } ); Hopefully this helps. Happy Tweening!

Hi @Justice, Thanks for sharing your solution with the community, very generous of you! 🥳 Just as an FYI @Cassie crafted this great demo: https://codepen.io/GreenSock/pen/ExEOeJQ Happy Tweening!

Great to hear that you were able to fix it! 🥳 Happy Tweenig!

Hi, You seem to be using Lenis, you have a business license, why not use ScrollSmoother? The issue here seems to be that something is getting cached and interfering with ScrollTrigger calculations, that's why a hard refresh fixes the issue. Maybe wrap all your code in a load event in order to be sure that everything is loaded: window.addEventListener("load", () => { // GSAP code here }); Unfortunately without a minimal demo there is not much we can do. If possible try to create a demo that recreates the problem so we can have a better look. Sorry I can't be of more assitance. Happy Tweening!

Hi, Jack is right, the issue is that in a Nuxt app you can access the runtime context with the useNuxtApp hook, but for using something from the app's context it has to be there first. In your demo I don't see any composable neither in the composables folder or in our package.json indicating that you installed a composable that abstracts GSAP's import statement: https://nuxt.com/docs/guide/going-further/nuxt-app https://nuxt.com/docs/guide/directory-structure/composables I think Jack's final suggestion is the best, just import GSAP in the files you need it and that should work. Happy Tweening!

Hey Ian, Great to hear that you were able to solve this 🥳 Finally thanks for sharing your solution with the community, I'm sure many users will benefit from your generosity 💚 Happy Tweening!