Jump to content
Search Community

Pause timline only after tween is completed

Robero test
Moderator Tag

Recommended Posts

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

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. 

  • Like 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...