Mattrudd Posted November 22, 2023 Share Posted November 22, 2023 Hi folks - first post since the new look (I must be finally getting better at this ha)... I LOVE it! Stylishly fun, great job! That said, I'm stuck with a quirk... yet another late night coding session so I'm bound to be missing something very simple! The scaleY animation I'm using works well, up until you really whiz the cursor across the containers. When the animations are triggered very quickly one after the next, they seem to jump straight to scaleY: 1 then get stuck rather than animating back down to 0. Thought it may be the absence of any "if animating" statements, but if you mouse over to another container at anything less than warp speed, any initial animation does reverse. Any pointers to explain this issue, so it works no matter how fast the cursor movement? May just be a case of setting up the animation outside the EventListener function to use play/reverse? See the Pen zYeWbqR by matt-rudd (@matt-rudd) on CodePen Link to comment Share on other sites More sharing options...
Solution Toso Posted November 22, 2023 Solution Share Posted November 22, 2023 That's what you looking for, highly recommend watching this video See the Pen MWJVWwy by snorkltv (@snorkltv) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Mattrudd Posted November 22, 2023 Author Share Posted November 22, 2023 @Toso Of course! I totally forgot about that method... must've been the late night after all! Thanks for the reminder/solution good sir. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted November 22, 2023 Share Posted November 22, 2023 Hi, Another alternative is to use overwrite in your mouse enter/leave animations so GSAP kills any animation that is affecting the same element and property: https://gsap.com/docs/v3/GSAP/Tween#special-properties overwrite If true, all tweens of the same targets will be killed immediately regardless of what properties they affect. If "auto", when the tween renders for the first time it hunt down any conflicts in active animations (animating the same properties of the same targets) and kill only those parts of the other tweens. Non-conflicting parts remain intact. If false, no overwriting strategies will be employed. Default: false. This code seems to work the way you expect: divs.forEach((div) => { // Select the span element inside the div const span = div.querySelector("span"); gsap.set(span, { scaleY: 0 }); // Add a mouseenter event listener to the div div.addEventListener("mouseenter", () => { // Animate the height of the span element from 0% to 100% gsap.to(span, { scaleY: 1, transformOrigin: "bottom center", ease: "power3.out", overwrite: true, duration: 0.5 }); }); // Add a mouseleave event listener to the div div.addEventListener("mouseleave", () => { // Animate the height of the span element from 100% to 0% gsap.to(span, { scaleY: 0, transformOrigin: "bottom center", ease: "power4.in", overwrite: true, duration: 0.4 }); }); }); Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now