Tweening to original state before .set()

[xtn 1 Likes (Newbie)]

Hi guys! Hope you all have a great day.

 

Is it possible to tween an element to its previous state prior to modifying it through .set() ?

 

Here's an example scenario:

1. #div has a background color of black: CSS - #div { background-color: #000 }
2. Then .set() was used to turn it to white: TweenMax.set('#div', { 'backgroundColor': '#fff' })
3. I want to tween it back to its original CSS style. (Is there something like TweenMax.to('#div', { revert: 'backgroundColor' })) ? I don't want to tween it to #000 since it has to be dynamic

Thanks guys! Your help is much appreciated!

[Diaco 1,948 Likes (Superhero)]

Hi xtn 

 

nope , for now there isn't any built-in solution , but i think in your case , the simplest way is one of these :

/// method 1 :

var elem = document.getElementById('blueBox');
// set() step :
var oldBackground = window.getComputedStyle(elem,null)["background-color"] || '' ;
TweenLite.set(elem,{backgroundColor:'#fff'});

// revert step :
TweenLite.to(elem,1,{backgroundColor:oldBackground});

/////////////////////////////////////////////////////////////////////

/// method 2 :

var elem = document.getElementById('redBox');
// set() step :
TweenLite.set(elem,{backgroundColor:'#fff'});

// revert step :
TweenLite.set(elem,{clearProps:'backgroundColor'});
TweenLite.from(elem,1,{backgroundColor:'#fff'});

i don't know what's your scenario/code , but you can use this too :

TweenLite.from( elem , 1 , { backgroundColor:'#fff' , paused:true });

and then play that when you want 

[Carl 9,066 Likes (Superhero)]

In addition to Diaco's great ideas you can also use a tween to record the starting value for you and then reverse it.

Below i create a super quick tween and force it to completion immediately.

When the user clicks the button the tween gets a longer duration and reverses back to the normal bgcolor

 

//set green div's bgcolor to white instantly with a quick tween
var bgTween = TweenLite.to(".green", 0.001, {backgroundColor:"white"});
bgTween.progress(1);


//tween back at longer duration
document.getElementById("btn").onclick = function() {
  bgTween.duration(1).progress(1).reverse();
}

http://codepen.io/GreenSock/pen/RaGvxz?editors=0010

 

*note: i started with a super short tween and changed the duration to be longer on the button click just to show that the system is completely flexible. You could have started with a tween with a 1-second duration and as long you are forcing progress(1) it will render instantly on the last frame.

[Jonathan 5,176 Likes (Superhero)]

I'm really digging your solution Carl, really cool solution!

[Diaco 1,948 Likes (Superhero)]

Great solution Carl ! , actually i thought about something like your solution , but faced to a little issue ; if you have a tween( tweening same property ) between set and revert steps .

 

otherwise your solution is certainly better than mine =) .

 

See the Pen NNRJVB by MAW (@MAW) on CodePen