Ivan Mocs Posted September 6, 2022 Share Posted September 6, 2022 i have problem with mouseleave animation, animation only appears once See the Pen WNJvOLy by ivan-nizters (@ivan-nizters) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted September 6, 2022 Share Posted September 6, 2022 Hi, The problem is related to the fact that the mouse leave animation, animates the opacity of the container to 0. Then on the next mouse enter event, the animation takes the container from opacity 0 to it's current opacity value, which is also 0. The GSAP instance actually happens, the issue are the current and starting values for the from instance. This seems to do what you want: hover1.addEventListener("mouseenter", (e) => { tl.fromTo(container, 1.5, { yPercent: -100, autoAlpha: 0 }, { yPercent: 0, ease: Power2.out, autoAlpha: 1 }); tl.from(image, 1.5, { yPercent: 100, scale: 1.3, delay: -1.5, ease: Power2.out }); }); Also I'd encourage you to find a way to use a single animation for hover effects and play/reverse it on each mouse event. It's far cleaner and easier to use, something like this: const tl = gsap.timeline({ paused: true }) //Add instances to the timeline const button = document.findElementById("button"); button.addEventListener("mouseenter", () => tl.play()); button.addEventListener("mouseleave", () => tl.reverse()); Also you can toggle the reversed property of a GSAP instance: tl.reversed( !tl.reversed() ); Happy Tweening!!! 1 Link to comment Share on other sites More sharing options...
Ivan Mocs Posted September 6, 2022 Author Share Posted September 6, 2022 (edited) 2 hours ago, Rodrigo said: Hi, The problem is related to the fact that the mouse leave animation, animates the opacity of the container to 0. Then on the next mouse enter event, the animation takes the container from opacity 0 to it's current opacity value, which is also 0. The GSAP instance actually happens, the issue are the current and starting values for the from instance. This seems to do what you want: hover1.addEventListener("mouseenter", (e) => { tl.fromTo(container, 1.5, { yPercent: -100, autoAlpha: 0 }, { yPercent: 0, ease: Power2.out, autoAlpha: 1 }); tl.from(image, 1.5, { yPercent: 100, scale: 1.3, delay: -1.5, ease: Power2.out }); }); Also I'd encourage you to find a way to use a single animation for hover effects and play/reverse it on each mouse event. It's far cleaner and easier to use, something like this: const tl = gsap.timeline({ paused: true }) //Add instances to the timeline const button = document.findElementById("button"); button.addEventListener("mouseenter", () => tl.play()); button.addEventListener("mouseleave", () => tl.reverse()); Also you can toggle the reversed property of a GSAP instance: tl.reversed( !tl.reversed() ); Happy Tweening!!! thanks in advance, I fixed it and it worked but why after animation both elements disappear Edited September 6, 2022 by Ivan Mocs Link to comment Share on other sites More sharing options...
Solution Anastasiya33 Posted September 6, 2022 Solution Share Posted September 6, 2022 Hey Ivan, I have forked your demo and changed a little bit. Please, check it. See the Pen BaxNqxN?editors=0010 by anastasiya33 (@anastasiya33) on CodePen 2 1 Link to comment Share on other sites More sharing options...
Ivan Mocs Posted September 6, 2022 Author Share Posted September 6, 2022 9 minutes ago, Anastasiya33 said: Hey Ivan, I have forked your demo and changed a little bit. Please, check it. Thank you 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