Ivan Mocs Posted September 6, 2022 Share Posted September 6, 2022 hello i have a problem when the mouse leave animation is jumping, animation starts fadein from bottom, but when animation is not fully finished and when mouse let fadeout to top animation plays See the Pen zYjvKeB by ivan-nizters (@ivan-nizters) on CodePen Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted September 7, 2022 Solution Share Posted September 7, 2022 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!!! 1 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