Jump to content
Search Community

Animation jumping when timeline.play after kill

Ivan Mocs test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

  • Solution

Hi,

 

The issue is in this part of your code:

let animation_out = tl3.to(fadeit, 0.8, {
  y: -60,
  autoAlpha: 0,
  ease: Power2.out
});

For optimization reasons, GSAP stores the starting values for the target. Since the IN animation moves the element from y: 60, the OUT animation takes the element to y: 0 before moving it to y: -60.

 

One approach would be to create a new GSAP instance on the mouse out event:

hover1.addEventListener("mouseenter", (e) => {
  animation.restart();
  animation_in.restart();
  animation_out && animation_out.kill();
});
hover1.addEventListener("mouseleave", (e) => {
  animation.kill();
  animation_in.kill();
  animation_out = gsap.to(fadeit, 0.8, {
    y: -60,
    autoAlpha: 0,
    ease: Power2.out
  });
});

Like that there is no issue with the position of the element when the out animation starts.

 

Happy Tweening!!!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...