Robero Posted January 13, 2021 Share Posted January 13, 2021 Hi there, I have a timeline with repeat -1, wich i play/pause on mouseenter/leave of the container. During the mouseleave event, I would to complete the fade-in animation of the image before pausing, to make sure I always have one image completly visibile. Any suggestions on how can I do that? Thank you, Roberto See the Pen wvzQaMG?editors=1010 by robyy94 (@robyy94) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted January 13, 2021 Share Posted January 13, 2021 Hey Robero. I would recommend not using the approach that you have that uses one tween to both fade an image in and out. Instead I would create a timeline with a different tween for the fading in and out and place a .call() that checks a boolean state for whether or not it should pause where you need it: TL.add(() => shouldPause ? TL.pause() : null); Then inside of the mouse listeners you affect the state: container.addEventListener('mouseenter', () => { shouldPause = false; TL.play(); }); container.addEventListener('mouseleave', () => shouldPause = true); You could keep your current setup but it makes placing the optional pause more difficult. 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