How to animate a list of object/properties to their original values ?

[flunch]

Hello, 

I'd like to create a timeline that at some point sets back initial properties on objects but without doing the animation backward (no reverse())

Ex. i have multiple boxes with different predefined colors and opacity.

I would like to animate them all to white and opacity:1 and scale:2

Then setting scale to 0

And then back to initial positions

 

ex. : 

tl.to(".box", 1, {backgroundColor:'#ffffff', opacity:0,scale:2})

.to(".box", 0, {scale:0})

.to(".box", 1, {backgroundColor:'Initial-Color?', opacity:'Initial-Opacity?',scale:1});

 

Thanks a lot !

See the Pen Wvworo by gavrochelegnou (@gavrochelegnou) on CodePen.

[Shaun Gorneau]

I would just capture those original values prior to any tweening. Then do any tweening you like followed, lastly, by tweening back to the original values held in the variables prior to tweening. Something like this,

 

See the Pen pJyRxm by sgorneau (@sgorneau) on CodePen.

[Carl]

Hi and welcome to the GreenSock forums,
 

Thanks for providing the demo. Very helpful.

 

Its an interesting challenge. What first comes to mind is something that involves recording the initial values and storing them on the DOM element like 

box1.background="blue" //or use getComputedStyle
box1.opacity=0.5

and then tweening back to those values like

.to(box1, 2, {backgroundColor:box1.background});

It can turn into a bit of work.

 

However a much easier solution is to use clearProps (see CSSPlugin docs) to remove all the inline styles and then tween from() whatever values you had tweened to() like this

 

tl.to(".box", 2, {backgroundColor:'#ffffff', opacity:0, scale:2})
  .set(".box", {scale:0})
//remove the inline styles of your choice that GSAP has animated (or use "all")
.set(".box", {clearProps:"backgroundColor,opacity,scale"}, "+=1")  
//tween from the values you want to the normal css values
.from(".box", 1, {backgroundColor:'#ffffff', opacity:0, scale:2, immediateRender:false});

http://codepen.io/GreenSock/pen/jPqyoo?editors=001

 

*that last tween you can tween from any values you like (they don't have to be the same ones you tweened to).

So the last tween could be 

.from(".box", 1, {opacity:0, scale:0, immediateRender:false});

which will match Shaun's result.

[Carl]

Nice work, Shaun!

Clever solution, and less work than I anticipated, especially with jQuery and the each() loop.

[flunch]

Hi, 

Thanks to you both for your good solutions and fast answers !

 

I'll try that at once.

 

Have a nice day et thanks for the amazing product !