Leaderboard

Hi @Qamar Aziz, This seems like fairly complex way of going about it! If you just build a timeline with all the animations on it you'll get this for free! I don't have time to rewrite your whole setup, but here an example with just the images that get added to your sliderTl and if you scroll the animation will play and if you scroll backwards the timeline reverses, for free! You have to do nothing for this and it all just works. If you would create all your text elements on page load you could also do this for the text. Side note: You should never apply CSS transitions to anything that JavaScript is animating because not only is it horrible for performance, but it'll prolong all the effects because whenever JavaScript updates a value (which GSAP typically does 60 times per second), the CSS transitions interrupt and say "NOPE! I won't allow that value to be changed right now...instead, I'm gonna slowly make it change over time". So it disrupts things, adds a bunch of load to the CPU because you've now got CSS and JS both fighting over the same properties, but let's say you've got a 1-second tween and the CSS transitions are set to take 1000ms...that means what you intended to take 1 second will actually take 2 seconds to complete. Check out this video it really demonstrates well how you should think about ScrollTrigger I’ve placed some comments in your JS to better explain things, please be sure to read through them! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/LYvEzZE?editors=0010

Thanks @Toso for adding those wonderful articles, they were really informative and I learned that one can also use grid over position: absolute, since it also keeps elements in the flow of the document, and thanks @Rodrigo for helping with the solution, I totally skipped the part where it mentions in the documentation that `An element (or selector text for the element) that should be pinned during the time that the ScrollTrigger is active` and focussed just on the property taking boolean values. Also the video by @Cassie gave me a totally new perspective on approaching scrollTrigger. I'll try to use "progressive enhancement" wherever I can. Thanks!

Nevermind, I figured that I needed to add a 'target' to the Observer. It works fine now.

Happy to help! Enjoy the tools. 💪

@Toso No problemo! Thank you for all your effort and help in the forums! 🙌

Yeah, animate the text so that is looks like it's scrolling! You're on an animation forum so you're going to get animation answers. But there are a 100 ways you could build this, it just depends on your skill level an how much elbow grease you want to put in it. I advise you to just start building and post back here with a minimal demo when you get stuck.

Hi, So I tried to create a simple example using the app router, React Transition Group and GSAP and ran into the same issues. I did some debugging and indeed Next is removing the previous element immediately which leads to the same element being animated in an odd way. I did some searching on the subject and I saw a few posts here and there and even the latest ones still use the pages router for this which definitely caught my attention. I kept digging and landed on this: https://github.com/vercel/next.js/discussions/42658 As you can see this is something related to the app router (since it can't be done with Framer neither), which creates a lot of confusion among React developers because of the whole client/server components, which reflects that the Next team has not been assertive, IMHO, on correctly communicating to developers when and, most importantly, how to use those components. The thing is that client components are still rendered in the server first and then hydrated on the client like Next worked always. What surprises me the most is that Next had ways to fetch data in the server previously that was passed to the client as props in the hydration phase, so I never really understood the switch. I know this because I worked for over a year on a SAAS based on Next that did exactly that in several routes. With the pages router you can still get a really good a performant app whose performance shouldn't suffer tremendously for not using the app router. Sorry to be the bearer of this news but unfortunately there isn't a lot we can do on our side and it doesn't seem to be an urgent matter for the Next team. Hopefully we a way to implement this can be found ASAP ? Happy Tweening!

This already exists. gsap.to("h1", { duration: 5, color: "red", ease: "power4.in", onUpdate: function() { console.log(this.ratio); } });

You can easily get this value by passing in the current .progress() to the ease function. You can do that using GSAP 3's parseEase() function: https://codepen.io/GreenSock/pen/LYVNjoo?editors=0010 Or use the _ease property of a tween (never set anything that has _ in GSAP but sometimes accessing it is okay): https://codepen.io/GreenSock/pen/OJVNjYR?editors=0010