Jump to content
Search Community

TweenMax time and reverse

Deon Sosa test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to achieve an animation where the user hovers over a header. On mouseenter the animation should start playing with a pre-defined duration. On mouseleave the animation should reverse with another duration (a much faster one).

 

My problem is that on mouseleave the animation doesn't reverse from where it was left off, it seems to be reversing randomly. If you hover over the title and rapidly hover off you can clearly see what I'm talking about.

 

I tried to set the time of the animation on mouseleave so it keeps tracks of where it was but it doesn't seem to work either.

See the Pen NZpvzm?editors=0010 by jorgeduardo (@jorgeduardo) on CodePen

Link to comment
Share on other sites

Rather than changing the duration each time, I think changing the timeScale() will give you the desired results.

 

title.mouseenter(function(){
    animation.play().timeScale(1);
})
title.mouseleave(function(){
    animation.reverse().timeScale(20);
})

 

Happy tweening.

  • Like 3
Link to comment
Share on other sites

20 minutes ago, PointC said:

Rather than changing the duration each time, I think changing the timeScale() will give you the desired results.

 


title.mouseenter(function(){
    animation.play().timeScale(1);
})
title.mouseleave(function(){
    animation.reverse().timeScale(20);
})

 

Happy tweening.

 

This works great! Thank you.

 

I'm just curious why the way I was trying to do it doesn't work. Does setting the duration messes up with the timing of the animation ?

Any insights on that ?

Link to comment
Share on other sites

Yes, you'll mess up the progress() of the animation when you change the duration like that. Your tween was 50 seconds long so if you wait 25 seconds and then change the duration to 1, your tween progress would be 25 which is way past the end. That's why it jumped like that.

 

To make it work like you had it, you could get the progress() of the play() tween when your mouseleave event fires and set the progress to that value when you change the duration. But changing the timeScale() is more concise in this case.

 

Happy tweening.

:)

 

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