Leaderboard

Hi, On top of @mvaneijgen's great solution you could also use the onToggle callback from ScrollTrigger: onToggle Function - A callback for when the ScrollTrigger toggles from inactive to active or the other way around. This is typically when the scroll position moves past the "start" or "end" in either direction, but if it shoots past BOTH on the same tick, like if the user scrolls extremely fast, onToggle won't fire because the state hasn't changed. You can often use this one callback in the place of onEnter, onLeave, onEnterBack, and onLeaveBack by just checking the isActive property for toggling things. Here is a simple fork of your demo: https://codepen.io/GreenSock/pen/XWQaZdV Hopefully this helps. Happy Tweening!

You don't need GSAP to add a class to an element, just use .classList.add(yourClass); The problem with that is that it either has the class or it does not, there is no in-between state, so nothing will animate, see below. You're on the GSAP forum, so I think you look to animate things, then just create an animation for each property you want to change, much more fun and easier to control! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/dyLzJxg?editors=0011

Here's a simple code example of invalidateOnRefresh gsap.to(".el", { xPercent: () => window.innerWidth / 2, // here's a functional value that will update if the window size changes, (it will 'invalidate' on 'refresh') rotation: window.innerWidth / 2, // this value won't update scrollTrigger: { invalidateOnRefresh: true ... } })

Yeah, that's because you're listening to the window's "scroll" event, but ScrollSmoother gradually applies that. So you're using stale values. Just set up an onUpdate event handler on the ScrollSmoother, and for maximum performance you can leverage a cache boolean to only trigger updates when absolutely necessary: https://codepen.io/GreenSock/pen/RwOZBjp?editors=0010 Is that what you're looking for?

I built a helper function specifically for this: https://codepen.io/GreenSock/pen/vYMJdjB?editors=0010 Related forums post: I hope that helps!

Hi, The demo has been updated with the silhouettes so is working as it should now: https://codepen.io/GreenSock/pen/PoqRZOB Happy Tweening!

Hi, Sorry about the difficulties but without a minimal demo there is not much we can do to help. On top of that we don't have the time resources to provide free general consulting or create something from scratch for our users. What you're trying to achieve is not the simplest thing to do, here are a few demos: https://codepen.io/osublake/pen/LYYJNmQ https://codepen.io/GreenSock/pen/MWPOQmo https://codepen.io/GreenSock/pen/MWqWvom Hopefully this helps. Happy Tweening!

Hey, that's more of a CSS question, we try to keep the forums to GSAP questions but this is an easy one so I'll help. You don't need flexbox on that tagline at all. Flex is for laying out elements on a responsive 2D grid. You've got a p tag there, with some elements (bold tags) and some text in the innerHTML. Flex will arrange the bold tags but can't do anything with the text. It's not made for use on text elements like this. I assume you just want to center the text? Something like this would work. #animation-container .tagline { position: fixed; text-align: center; width: 100vw; top: 50%; transform: translateY(-50%); }

Hi @codechirag. It's super tough to troubleshoot a live site. There are way too many factors and we can't really tweak things to see what's going on. If you'd like some help, please provide a minimal demo, like a Stackblitz or CodePen. Here's a starter template you can fork: https://stackblitz.com/edit/react-cxv92j Also keep in mind that Split-Type is not a GSAP product, so we can't really support that. Our tool is SplitText. 🙂

That's not an Observer issue - it's just that Apple touchpads and magic mouse keep emitting "wheel" events for a while after you release - it's what creates the momentum effect. So if you flick very strongly, you're firing the animation and then when the animation is done, there are still wheel events getting fired from the strong flick (momentum), thus it triggers another animation because those residual wheel events triggered the Observer's onUp()/onDown(). See the problem? So you could add some logic to sense that condition and work around it, like maybe: https://codepen.io/GreenSock/pen/jORLMLO?editors=0010 To make things easy, I just use ScrollTrigger's "scrollEnd" event handler but you could wire that all up yourself manually if you prefer not to use ScrollTrigger. Does that work better for you?

Hi @nav and welcome to the GSAP Forums! Yeah it seems that some images were lost at some point with the domain change (from greensock.com to gsap.com). Basically a placeholder with a silhouette was in front of each image. For now I forked that demo with a placeholder instead for each card so you can see the effect https://codepen.io/GreenSock/pen/PoqRZOB Happy Tweening!

I've just build something similar, check it out! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WNWxPGV?editors=0010

Hi, This is not the simplest thing to achieve. Here is a simple fork of your demo: https://codepen.io/GreenSock/pen/GRLjGBP There are a few details missing but the bulk of the concept is pretty much there. Hopefully this helps. Happy Tweening!

Here are some of the problems I noticed: You were adding a new "mouseleave" event handler on EVERY "mousemove" event, so when the mouse left the button, there were probably thousands of those firing, all trying to tween the same properties of the same element. Massively wasteful. You weren't applying any overwrite logic, so you were creating a bunch of overlapping tweens, all controlling the same stuff. I'd recommend using gsap.quickTo() for the best performance on things where you're constantly interrupting and trying to go to new destinations. You were using pageX/pageY instead of clientX/clientY for measurements, thus after scrolling the calculations would be incorrect. You were only applying the magnetic affect to one .btn instead of all of them. Just loop through them accordingly. You were using an onscroll listener, but you might want to consider using ScrollTrigger instead because it simplifies things. Maybe this will help: https://codepen.io/GreenSock/pen/QWooxbG?editors=0010

Hi pal! You can simplify your approach down quite a lot though by using staggers and just targeting the class rather than looping around. If you're looking for smoothness maybe try a different ease, or a different duration? 'sine' is often nice and smooth. https://codepen.io/GreenSock/pen/poeGmqw?editors=0010