scaleY .to getting stuck

[Mattrudd]

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

[Toso]

That's what you looking for, highly recommend watching this video  

 

 

See the Pen MWJVWwy by snorkltv (@snorkltv) on CodePen

 

 

 

 

 

[Mattrudd]

@Toso Of course! I totally forgot about that method... must've been the late night after all!

Thanks for the reminder/solution good sir.

[Rodrigo]

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!