Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Kalimeromax

Play animation backwards

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

Hey there,

 

this is my first time using GSAP. I'd like to play my animation backwards on hover.

The only thing I can't figure out jet is how i can make the animation do that in 1 second.

Any ideas?

 

If this is not possible it would be also nice if the animation just jumps back to its origin position on hover.

 

In addition to that: Is it possible to start the animation again on mouseout?

 

Best regards

Max

See the Pen BOpZKw by Kalimeromax (@Kalimeromax) on CodePen

Link to comment
Share on other sites

You can change the speed by changing timeScale on reverse.

 

See the Pen pOrJJm?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

But to do that your timeline should be constructed as single parent timeline, that can contain other timelines. Take a  look at following article on how you can write better animation using functions, you are already doing it just need minor tweaks.

 

https://css-tricks.com/writing-smarter-animation-code/

  • Like 6
Link to comment
Share on other sites

@Sahil Thanks for your advice! The article and your pen helped me a lot. I managed to reverse the animation on hover and to play it again on hover out. Which is great (you can see it in my first pen)! But when i tried to nest my 4 Timelines with ".add" in one master Timeline my 4 Timelines played successively. I need to play all of them parallel. Is there a way to nest all my Timelines in one master Timeline and play them parallel?

 

Thanks in advance

Max

  • Like 1
Link to comment
Share on other sites

Ya you can have multiple timelines starting simultaneously in parent timeline using position parameter. Take a look at following video,

 

 

  • Like 4
Link to comment
Share on other sites

Hi @Kalimeromax

 

I don't think a master timeline is a good idea for what you're doing. All your timelines repeat, but with different durations, so they aren't synced with each other. And the infinite repeat creates another issue. When you reverse a timeline, it's going to play in reverse for however long it has been playing forward i.e. its .totalTime(). That's why some of your reverse animations take longer than 1 second to complete.

 

See if this is more of what you were going for. On hover enter, I adjust the totalTime as if the animation where on its first iteration.

 

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

 

 

  • Like 6
  • Thanks 1
Link to comment
Share on other sites

@OSUblake Hey! Thank you so much! This is exactly what i wanted to do.

I'm going to look into you're pen to understand what you did there.

 

Thanks @Sahil for your help too.

 

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