Jump to content
Search Community

TweenMax.from() doesn't always return to correct location

callavar 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

Hello,

 

I have just started using GSAP the past couple of days and let me just say, I absolutely love it. The functionality and smoothness of the animations are great and I love the amount of options it gives you. I have run into a problem, however. I am currently trying to use TweenMax.from() to fade in and move up a title for a planet when the planet is hovered over. When the mouse is moved away from the planet, the name fades back out. The issue is that after multiple times hovering and moving away, the location that the name moves too is not correct.

 

I have a guess as to what's happening, and I don't know how to go about fixing it. I think that if the mouse is moved away from the planet before the name get's to it's set position, the position it was left on is now the "new" position and will be where the tween will try and place it on the next hover. What can I do to make sure this doesn't happen? I know I can create a timeline and reverse it, but I would like to not move the name down when it fades out, I'd like it to fade out at it's position, which means the reverse method wouldn't quite work. 

 

Thank you for your time!

See the Pen aYYryN by callavar (@callavar) on CodePen

Link to comment
Share on other sites

Your guess would be correct as to the problem. When you interrupt an animation, the value does not back to its original state, which can problematic with from tweens. 

 

You could do a fromTo tween, going from y=100 to y=0, which would fix the position problem. Not sure how you wanted to handle hovering in -> out -> in really quickly, but I set it up so only the position resets.

 

See the Pen WzzBaW by osublake (@osublake) on CodePen

 

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