Rodrigo

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!