Cassie

Hi there - this modified demo gives you the center 'active' element. You could change styling in the onUpdate callback - hope this helps! https://codepen.io/GreenSock/pen/gOvvJee

Hi! I'm afraid I can't find that exact demo but I'm sure we can help you to figure out how to apply it to your demo. Maybe you could show us where you're stuck?

Unfortunately SVG paths can be a little jittery on low end devices - the animation isn't hardware accelerated, unlike properties like transforms and opacity. (Although in SVG land, that's still only in some browsers) There's not a huge amount we can do about that I'm afraid.

If the scrolling is a little jumpy on scroll I assume it's because you're using a mousewheel? So it's jumping in increments? A few options - You could add a smooth scrolling library to even this out Rewrite this to use scrollTrigger instead of observer so you can make use of scrub values to smooth the animation Write some custom logic to smooth out the values you're getting from observer before plugging them into the tween Possibly use a to tween with a short duration instead? Each of these routes will involve some trial and error and some testing - This article may be of use. This was put together from a lot of back and forth in the GSAP forums and might be a good baseline approach for what you're attempting. https://css-tricks.com/going-meta-gsap-the-quest-for-perfect-infinite-scrolling/ Alternately if you want someone to help build this out for you to spec you can post in the GSAP jobs/freelance forums!

Hi there! Just some numbers that GSAP is struggling to tween between. If you make them all percentages it works fine. It's hard for GSAP to animate between 0 and 100% as they're different units. timeline.fromTo( ".home__text span", { y: 30, clipPath: "polygon(100% 100%, 0% 100%, 0% 100%, 100% 100%)" }, { y: 0, clipPath: "polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%)", duration: 0.8, stagger: 0.2, } );

Hi there - Looks like you're trying to pin elements using position 'fixed' inside a transformed container. This isn't a GSAP bug - just a browser limitation. You can use pinType: 'transform' to fix this. Also just a heads up that we have our own scroll smoothing plugin that works around a lot of annoying edge cases and browser bugs. https://greensock.com/scrollsmoother/

Heya! Could you pop a minimal demo in here so we can see what you're trying to achieve, it's very dependant on the type of animations and on your markup. Thanks!

Heya! Super annoying. Sorry to hear. But yep it is possible to get it to work, it seems like there are specific combinations of setups that cause issues sometimes. I personally use Netlify with netlify env vars and npm without issues. Maybe this blog post will help? https://blog.privjs.com/article/how-to-install-club-greensock-packages-on-netlify Give it a bash and if not we'll step through it together until it's working!

Hey - so right now your tweens are both the default duration - 0.5seconds. If you want the second one to last longer you'll need to change the duration - something like this. t0.from(".one", { duration: 1 }) .to(".two", {duration: 2})

You can also just call ScrollTrigger.refresh() when the DOM's loaded. ✨

Sorry you're gonna have to give me a demo. I can't picture this at all. It sounds like your setup is a little off. If you can show me in a codepen I'm sure I can help you.

It still sounds to me like a rethink would be ideal here - if you remake it with some tweens instead of classes then ScrollTrigger will understand what's going on and you won't have these conflicts. Rodrigo's pen is a simplified example, but you could easily add a container in there if you needed. The concept of using GSAP to animate instead of classes is the same Feel free to give us an updated codepen with a little more complexity for us to take a look, but please no dev links. I'm afraid we don't have the resources to be looking through live sites.

That's not bad practice in and of itself. It just depends on what you're trying to achieve. That does look like it would be starting the animation in a bit of a weird place though. Have you popped markers on to see where it's starting? Overlapping start positions could cause issues too.

You're describing Observer again. Or maybe snapping? https://codepen.io/GreenSock/pen/mdjLXvY?editors=0011

Hi there. That's very pretty simple animation to get going with. The rocket would just be a tweening up and to the right https://codepen.io/GreenSock/pen/JjBvpBL The boxes on the outside that are gently moving could be animated nicely with a stagger https://greensock.com/docs/v3/Staggers Hope that helps!