Tween back to initial positions

[justonequestion]

Hi everyone,

 

I've been working with GSAP for a little while now and feel comfortable with tweening elements. Tweening elements back to their start positions has been a whole different ballgame, though. I have something inelegant working, but I feel like I may be missing The Right Way to think about this.

 

So I needed to slide open a search box when it was clicked on. I created a timeline, added some .to tweens, done. Now if someone clicked the close button, I needed to get back to the start.

 

I thought first that I would simply reverse my timeline, but the easing that looked good when played forward didn't look as good when it was being played backwards. So I created a new timeline that essentially repeats the first one, just with some different easing. And since I'm not reversing, I now needed to declare what to tween back to. I created a bunch of variables that made a note of what the heights and widths of the various DOM elements were upon the first page load. This seems like a lot of bookkeeping, though, which is what made me think I was missing something.

 

Here are my two questions, one general and one specific: am I missing anything? And is there a smarter way of accessing initial values? I saw a few posts that talked about an object, ._gsTransform, but didn't have much luck accessing it. Happy to take another run at that if it's the way to go.

[Sahil]

Can you post a demo? I think your implementation can be achieved with very few lines. It will also be better for you to get your own code refactored and see how something can be achieved.

 

Follow this thread and create a simple demo with limited code that demonstrates your problem.

 

 

[justonequestion]

Hello Sahil, thanks for your reply. Here's a demo. 

 

See the Pen qVWzdV by egerm (@egerm) on CodePen

 

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the clear and reduced demo. Very helpful. 

Yes, when a tween reverses() it honors the ease you gave it. So if a tween bounces at the end, logic implies that when the playhead moves back through that tween it will go backwards through the bounce part first.

 

There is one exception to this rule, and that is if you have a repeating tween that yoyo's you can specify a separate yoyoEase as explained here: https://greensock.com/1-20-0

 

 

Tweens and timelines are linear. Think of watching a movie. If you watch scene1, scene2 and then scene3 and hit reverse you'll watch through scene3, scene2, and scene1.

 

In addition to wanting the ease to be different on "reverse" it seems you are also switching the order of the animations.

 

Forward: Red then blue

Reverse: Red then blue

 

In this case a simple reverse will not work. These are completely unique sequences. My solution is to create the timelines that you need when you need them:

 

Please see this fork of your demo:

 

See the Pen zPOgGL?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Only hit the buttons when the previous animation has finished. I think it does what you want.

 

The down side is that if you click while an animation is playing you may get some expected but undesired results. I made the blue tween really slow to help illustrate this.

 

• re-run the demo
• click "start tween"
• when the blue box starts shrinking click "tween back"
• the blue box will stop shrinking
• the red box will shrink
• then the blue box will continue shrinking

Again, since you are changing the order for the "reverse" effect, it may be visually jarring / awkward. If the animation is fast enough, perhaps not.

 

You may also notice if you click the "tween back" button very quickly when blue starts shrinking, lets say 0.1 seconds after the it starts animating (so its only shrunk by a tiny bit) when blue starts going back to "normal" size it is still going to take 3 seconds to grow that tiny amount.

 

I think the best result for you is to use the unique eases you want in the close() animation but don't mess with the order of the tweens. If red plays first on open, have it play last on close.

 

 

 

You may notice that in my solution I'm using functions to create and return timelines. This is particularly helpful because we need the same timeline delivered repeatedly on demand. To find out more about using functions to return timelines check out: https://css-tricks.com/writing-smarter-animation-code/

[justonequestion]

Thanks, Carl -- I like the concept of returning timelines out of functions, that will be helpful. It sounds like I had it right in terms of setup, then, and tracking everything with variables?

 

 

[Sahil]

Ya I think you were doing it right, sorry for the false hopes. I gave it a try and couldn't find better answer.

 

Personally I would approach it by using className so you don't have to keep track of different values, but @Carl would suggest against it I guess.

 

As for ._gsTransform, it only let's you access values that gsap stores on DOM. When gsap tweens any elements, it attaches that object and assigns current transform properties so you can use it do any calculation.