Reverse Animation

[namjoonforpresident]

I'm having some trouble with reversing this animated svg. I've already attempted the reverse yoyo method but it didn't work, thought I could have done it wrong. Any help would be appreciated

See the Pen RePPxR by namjoonforpresident (@namjoonforpresident) on CodePen

[PointC]

Hi and welcome to the forum

 

Reversing a loose collection of tweens will be a bit tricky. That's where you'd want to use a timeline. Here's a fork of your pen that reverses by setting the repeat count to 1 and yoyo to true. 

 

 

See the Pen bmddzL by PointC (@PointC) on CodePen

 

Of course you can set the repeat count to anything you like. Setting it to -1 will repeat infinitely. You can also add a button to control the reverse too.  

 

More info about timelines:

https://greensock.com/docs/TimelineMax

 

More info about the position parameter.

https://greensock.com/position-parameter

 

Hopefully that helps. Happy tweening.

 

[namjoonforpresident]

That was really helpful. Thank you!