Leaderboard

One of the reasons gsap.quickTo() is so fast is because it skips a bunch of conveniences like unit conversions, special features like "_short", relative values, etc. - it's purely for funneling a raw number directly into an existing tween. So I would probably do it like this: https://codepen.io/GreenSock/pen/MWRJJay?editors=0010 One simple tween that gets killed/replaced on each move.

Hi All, It's ok I figured out what the problem was, when using SmoothScroller need to make sure the smooth-wrapper is around all content not just the animation! https://codepen.io/psthomson75/pen/dyLpKwK (smooth-wrapper around animation only - all the content overlaps) https://codepen.io/psthomson75/pen/XWQpJmB (smooth-wrapper around all content -now the content keeps the same layout + has smooth scroll 😎) Instead of trying to describe again just forked the codepen with a fixed version. Cheers, Paul

Lol I was just typing this out: You can snap to different progress values. Check out snap in the do https://gsap.com/docs/v3/Plugins/ScrollTrigger/ as mentioned it snaps to progress values, eg 0 is the start of your ScrollTrigger and 1 is the end. Your total scroll distance is 6000px, so let's say you have 6 images and you want to snap to each one of them 1 / 6 = 0,1666, you you want to snap to increments of 0.1666 Hope it helps and happy tweening!

You'd stated you've fixed it? I still wanted to share some insight on how I would set this up. I've two pens for you, one with some comments in your JS of things that aren't quite right: https://codepen.io/mvaneijgen/pen/BaEQrBe?editors=0010 And one with a timeline and two tweens. I've modified your SVG, because there were some transforms on shapes. When animating SVG I always like to flatten all transforms (this should be an option in your design program). Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYvbzae?editors=0010

Hi, I want to hire a freelancer who can develop a site like https://boredapeyachtclub.com/ I will provide images and rest of thing developer have to design. Thanks.

Cool animation @iamruletik, really good job 👏

OK. Somewhat comforting to know that things like this happen to people as talented and accomplished as you Thank you for all your help, Xristi

Hi, The problem is not related to Redux or state management, but in the order of operations. In React the component tree is rendered from the farthest child up to the main root component, so when you have this in your main app: <div className='w-full min-h-svh flex flex-col items-center justify-center bg-zinc-900'> <Box1 /> </div> And this in your Box1 component: <div ref={container}> <div className='red-box w-40 h-40 bg-red-500 mb-10'></div> <Box2 /> </div> Box2 is rendered first and that particular instance is added to the timeline, then Box1 is rendered and that animation is added to the timeline, so the timeline plays the elements in the right order. In order to make this work the way you want your app file should have both Box components in the order you want the animations to happen: <div className='w-full min-h-svh flex flex-col items-center justify-center bg-zinc-900'> <Box1 /> <Box2 /> </div> That seems to work the way you intend. Hopefully this helps Happy Tweening!

@GreenSock Thank you for the link, they fixed it. I just updated to the latest lenis version and now it's good.

Check out this post I made exactly because of these kinds of questions. The main gist is that you want to start with all the cards at the same position and just move them from there. I think this post really helps you understand how this works, but if you still need help post back here and show in a new demo what you've tried. Hope it helps and happy tweening!

Welcome to GSAP, @BattN There are many ways you could do that. Here's just one: https://codepen.io/GreenSock/pen/KKYNYgy?editors=0010

@mvaneijgen Thanks for the idea, I tried your approach for the animation and seems like it worked :) https://codepen.io/iamruletik/pen/oNOYMoa

This sounds like the issue discussed here: https://github.com/darkroomengineering/lenis/issues/311#issuecomment-1986531084 It's not a GSAP/Observer problem - it's a very weird Firefox behavior that Lenis doesn't handle properly but I think they're working on a fix.

I figured it out. It has to do with the order that things get refreshed. ScrollSmoother forces ScrollTrigger.sort() to get called which orders things by the ScrollTrigger's start value which is a decimal for any ScrollTriggers with containerAnimations. So all you really need to do to fix it in the current version is to explicitly set a lower refreshPriority on the containerAnimation ones: https://codepen.io/GreenSock/pen/JjVKrEO?editors=0010 (I set refreshPriority: -1) It should be resolved in the next release which you can preview at: https://assets.codepen.io/16327/ScrollTrigger.min.js (you may need to clear your cache) Does that clear things up for you?

Hi @iamruletik The best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. I would start with just the animation on a timeline and get that to work exactly how you want and only when that is done hook it to ScrollTrigger. I've just written a post how I see people start optimising their code before it is working and how this stops you from progressing. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQmKOd?editors=0010