Rodrigo

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!

Hi @mukeshKumarSardiwal1997 and welcome to the GSAP Forums! Besides echoing the need for a minimal demo, there are a few things to note about your snippet. When using our useGSAP hook there is no need for manual cleanup of your GSAP/ScrollTrigger instances, the hook does that for you, so there is no need for this: useGSAP(() => { const tl = gsap.timeline.to(element, { scrollTrigger: {}, }); return () => { ScrollTrigger.revert(); }; }); Finally the onRefresh is a callback that works on the config object, but that can't be invoked directly like this: rwd.vars.scrollTrigger.onRefresh() You should be getting an error indicating that onRefresh is not a function. If you want to refresh a specific ScrollTrigger instance just do this: rwd.vars.scrollTrigger.refresh(); https://gsap.com/docs/v3/Plugins/ScrollTrigger/refresh() Hopefully this helps. Happy Tweening!

Hi @Meoki and welcome to the GSAP Forums! Unfortunately there is not a lot we can do without a minimal demo. We have a collection of starter templates that use GSAP in React apps on staclblitz, you can fork one and try to replicate the issue: https://stackblitz.com/@gsap-dev/collections/gsap-react-starters Finally the way the loading works for the images looks a bit odd to me TBH. If I was to do that I'd load the images on the main App component and use conditional rendering and Suspense to render everything once the fonts are loaded: https://react.dev/reference/react/Suspense Hopefully this helps. Happy Tweening!

Hi, There is not a lot we can do without a minimal demo, but from what you describe the only guess I can make is that feedLoaded (whatever that is, a boolean, array, etc.) is not falsy when you navigate back to that route I don't see that in the code snippet you posted Clearly there is something related with the way you're handling this side of your app, that is causing this problem, unfortunately without a minimal demo there is not a lot we can do. We have a collection of NextJS starter templates that you can fork: https://stackblitz.com/@gsap-dev/collections/gsap-nextjs-starters Happy Tweening!

Hi, I think the main issue here is the fact that you're using the same element as the scroller (the document element). ScrollTrigger allows you to define a scroller which is the element where ScrollTrigger will look for the scroll position in order to update any Tween/Timeline you pass to it. From the ScrollTrigger docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object Here are a couple of demos that use a similar approach: https://codepen.io/GreenSock/pen/yLRQozy https://codepen.io/GreenSock/pen/OJBvBjB Hopefully this helps. Happy Tweening!

That's because you haven't updated your code with the suggestions Jack made, that's all I recommend you to have a better and close look at the code in Jack's demo in order to understand how is actually working. Happy Tweening!

Hi, I still can't grasp what you're trying to achieve here. Are you trying to add animations inside the stacked cards? It would be super helpful if you could provide a clear description of what you're trying to do and if possible a live demo of another app or site so we can get a clear idea of what you're trying to do. Happy Tweening!

Hi @AnnaDVD and welcome to the GSAP Forums! Unfortunately we don't have a lot of experience with Angular around here, so we don't have a starter template for GSAP on an Angular app. Also vague details like 'it's broken' or 'it doesn't work' are very difficult for people to help with. Here are some tips that will increase your chances of getting a relevant answer: A clear description of the expected result - "I am expecting the purple div to spin 360degrees" A clear description of the issue - "the purple div only spins 90deg" A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" You can create a demo on Stackblitz by clicking new project and then selecting the Frontend tab: Finally from your code snippet I can see that you're adding a ScrollTrigger to a child instance inside of a Timeline. We strongly recommend against doing that: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Hopefully this helps. Happy Tweening!

Yeah, you could keep track of the state of one set of images and use Flip's fit() method: https://gsap.com/docs/v3/Plugins/Flip/static.fit() Also in order to keep things optimized you can check the state of the images only at startup and then on a window resize using a debounce method for that. Happy Tweening!