Play animation backwards

[Kalimeromax]

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

[Sahil]

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/

[Kalimeromax]

@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

[Sahil]

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

 

 

[OSUblake]

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

 

 

[Kalimeromax]

@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.