Rodrigo

Hi, There are a few issues in your demo. First you're creating a single timeline for all the buttons, that is not going to work the way you intend, create the GSAP Tween/Timeline, inside the loop so each button controls it's own animation. Second, you have the same mask name for all the elements, which means that when one mask is animated it affects all the elements with that mask ID, create a different mask ID for each element. Here is a fork of your demo: https://codepen.io/GreenSock/pen/rNbRxrP Hopefully this helps. Happy Tweening!

Hi, The specific issue here stems from the fact that you're using the GSAP Trial package. The short explanation is that the useGSAP hook uses the regular GSAP import, like this: import gsap from "gsap"; But the rest of your app is using the GSAP core files from the gsap-trial package which is a completely different object (the code is basically the same but it comes from different files, hence a different object), so the scope is not being used because is added to a different GSAP core object. The solution is to register the useGSAP hook using the import from the gsap-trial package so it uses the same GSAP core than the rest of the plugins: gsap.registerPlugin(ScrollTrigger, useGSAP); That should fix the problem. Happy Tweening!

Hi @stectix, Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption. I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo: https://github.com/rhernandog/next-gsap-bonus-yarn-vercel Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin): https://next-gsap-bonus-yarn-vercel.vercel.app/ I installed using the shockingly package since the plugins are the same: yarn add gsap@npm:@gsap/shockingly Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well. Hopefully this helps. Happy Tweening!

Hi, Honestly IDK what can be done since normally when you swipe on a touch device the momentum scroll will trigger. During that any touch input will immediately stop the momentum scroll. This is how browsers work mostly. On that note what type of touch event should not be considered an autoKill event? How can that be achieved? Right of the top of my head I can't think of a way to achieve this. Sorry I can't be of more assistance 🫤 Happy Tweening!

Not at all, just don't include the page flipping on that conditional block because that has to happen no matter what, right? Always create the page flipping animation and depending on the conditional block create the rest animations. Happy Tweening!

Hi, Well I couldn't resist to create a simple demo of this, super fun!: https://codepen.io/GreenSock/pen/BaEMOrd The magic numbers you see there are because: The width of the wrapper is 80% the screen width. The wrapper for the box has a 10 px padding on the left/right The box element has a fixed width of 75px Hopefully this helps. Happy Tweening!

Hi @greenwich and welcome to the GSAP Forums! Sorry for the late answer 🙏 Maybe something like this: https://codepen.io/GreenSock/pen/WNWPKBp Is basically a fork of the demo you posted but it uses ScrollTo plugin instead of CSS' scroll-snap and also takes into account the height of the footer. In this case the footer has a fixed height, but if your footer has a dynamic height, you can easily use something like this in the end point calculation: const footer = document.querySelector("footer"); ScrollTrigger.create({ start: 0, end: () => ScrollTrigger.maxScroll(window) - footer.clientHeight, snap: 1 / (panels.length - 1) }) Hopefully this helps. Happy Tweening!

Hi, You're basically rendering a bunch of images inside an SVG tag using Lottie for that. I'm not an expert on Lottie but I think canvas would be a far better alternative than Lottie and you can plug that into ScrollTrigger as well: https://codepen.io/GreenSock/pen/VwgevYW As for the issue, I see it on the latest firefox but the issue happens only in the first time you scroll down, if you go to the end, then scroll up and down again there is no flickering. This seems to me just like a first render type of issue which doesn't look like is related to GSAP. If I was you I'd use the canvas approach showed in the demo I linked above. Happy Tweening!

Hi @lagalga, You could actually set the initial size with that calc using CSS and then just use a regular to() instance to create the animation: .my-element { width: calc(100vw - var(--border)); } Then in your JS: gsap.to(".my-element", { width: 250, }); That would be the approach I'd take. If you keep having issues, please create a minimal demo from this codepen starter: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!

Hi, Sorry to hear about the issues but unfortunately I don't have a Mac so I can't test. What I can tell you that there is more than a handful of rendering issues reported on Safari that have not been addressed by the Safari team yet. Also why are you animating from y: "0%"? since the element doesn't have any other class or style applied to that element that changes the translate value. That seems unnecessary TBH. Sorry I can't be of more assistance 😞 Happy Tweening!

Hi, I fail to see the logic behind what you're doing in this demo TBH. Why you need that custom hook? What is actually doing? Why create and use that hook instead of the useGSAP hook? Concerning your initial question: What exactly is jerky in your demo? You are creating some GSAP Timelines with your hook but those are not animating anything, they just have a ScrollTrigger configuration, but nothing more, so there is nothing animating so there is nothing behaving jerky in your demo. Maybe I'm missing something obvious here 🤷‍♂️ Happy Tweening!

Hi, That is to be expected actually. When the component is mounted you add that function to the RAF but when the component is unmounted you didn't canceled that particular RAF ID: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelAnimationFrame So obviously that keeps running and looking for an element with that particular ID that is nowhere to be found in the DOM, hence the warnings by GSAP. const { contextSafe } = useGSAP( () => { requestId = requestAnimationFrame(elementAnimationFrame); return () => cancelAnimationFrame(requestId); }, { scope: container } ); Finally I'd strongly recommend you to use GSAP's Ticker instead of RAF: https://gsap.com/docs/v3/GSAP/gsap.ticker() const { contextSafe } = useGSAP( () => { gsap.ticker.add(elementAnimationFrame); return () => gsap.ticker.remove(elementAnimationFrame); }, { scope: container } ); const elementAnimationFrame = contextSafe(() => { xPercent += 0.5 gsap.set('.something', { xPercent }); }); Hopefully this helps. Happy Tweening!

Well the only thing I can see is that there is no animation at all here: gsap.to(trigger, { scrollTrigger: { trigger: trigger, start: 'top center', y: '-=100px', ease: "power1.inOut", stagger: .2, onEnter: () => { console.log('coucou') } } }) You have a GSAP to() instance but there is no animation whatsoever, just the ScrollTrigger configuration, if you remove that this is what's left: gsap.to(trigger, { }) Nothing, nada, nicht. See the problem? You need to add some property for those elements that can be animated to begin with. Finally you're planning to animate the same element that you're using as a trigger on your ScrollTrigger configuration. Be super careful about that and if possible avoid animating the trigger element because it could lead to unexpected results. Happy Tweening!

Hi, That is to be expected actually. When you pass a true argument in the random utility method, what is returned is a function that has to be called, without it what's returned is a number: typeof gsap.utils.random(0, 20) // -> Number typeof gsap.utils.random(0, 20) + "%" // -> String - Coerced into a string typeof gsap.utils.random(0, 20, true) // -> Function typeof gsap.utils.random(0, 20, true) + "%" // -> ....?? I quit! What you can do is something like this: width: () => gsap.utils.random(0, 20, true)() + "%" But I don't really see any upside between using that one ☝️ instead of this: width: gsap.utils.random(0, 20) + "%", Finally you can use the Unitize utility as well: https://gsap.com/docs/v3/GSAP/UtilityMethods/unitize() Hopefully this helps. Happy Tweening!

Does it? Honestly I can't think of a simpler way to achieve this. You can do it by hand but the calculations will become far more complex, I can tell you that. I you remove the ScrollTo Plugin from the equation, you'll have to find the height of the document element, to that you have to subtract the height of the screen and then use the same calculation in the Draggable instance to factor the current Y position of the element being dragged to the boundaries of the Draggable instance, translate that into a scroll position and finally use the scrollTo method to update the actual scroll position. If you ask me it's quite simpler to let GSAP and the ScrollTo Plugin to handle all the math of that for you. What exactly are you struggling with about this code? onDrag:function() { tnProgress = this.x / limit; logDiv.innerHTML = tnProgress.toFixed(4); t.progress(tnProgress); gsap.set(dragBar, {width:this.x + 10}); }, That's all there is to it. I see you updated your demo and you're using ScrollTrigger, you can definitely use the same approach to update the scroll position of a ScrollTrigger instance: https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroll() But I still recommend you to use the ScrollTo Plugin and leverage everything with the native scroll, updating this with ScrollTrigger will involve even more calculations actually. Happy Tweening!

Hi @Katarzyna and welcome to the GSAP Forums! I checked on my android device on chrome and firefox and can't see anything shaking Maybe you refer to either the Gallery text or the elements, maybe you can try to add this in your css for those elements: .class-name { will-change: transform; } Try that and let us know how it goes. Happy Tweening!

Hi, Besides echoing the need for a minimal demo, I'd strongly recommend that you use GSAP Context for this: https://gsap.com/docs/v3/GSAP/gsap.context() Here is a simple demo using Vue Router with GSAP Context to revert all the GSAP instances created inside it's scope: https://stackblitz.com/edit/vitejs-vite-6pprgk Finally, you created a duplicated post in another thread, I'm going to delete that so we can focus our attention in this one. Happy Tweening!

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!