Return to original value

[cmal]

After performing a bunch of different tweens on an element, is there a shortcut to tween back to the original value?

 

Here's an example…

var myPath = document.getElementsByTagName('path')[0]
var strokeLength = path.getTotalLength();
myPath.style.strokeDashArray = strokeLength;
myPath.style.strokeDashOffset = strokeLength;

var tl = new TimelineLite
  .to(myPath.style, 1,
    {
      strokeDashoffset: 0
    }
  )
  .to(myPath.style, 1,
    {
      // Ideally, I could return to the pre-tweened value here
      // without needing to look it up again (or store it in some other way)
      strokeDashoffset: X
    }
  )

[Rodrigo]

Hi,
 
If you're tweening CSS properties you can use clearProps in the config object.

var myElement = document.getElementById("myElement");

TweenLite.to(myElement, 1, {vars});

//then go back to the original values
TweenLite.set(myElement, {clearProps:"property1, property2"});

//or remove everything
TweenLite.set(myElement, {clearProps:"all"});

Now if you're not using the CSS Plugin, which seems to be the case my guess is that clearProps is not going to work, specially if you define inline styles before using GSAP on the element. It seems that you're changing some style properties in SVG elements, right?. If so, using clearProps will clear the inline styles completely, even those the target had before their were tweened with GSAP. If that's the case then you'll have to store them, but you could avoid using a variable. An option is attach a property to the DOM element:

var myPath = document.getElementsByTagName("path")[0],
    strokeLength = myPath.getTotatlLength();

myPath.originalValue = strokeLength;

var tl = new TimelineLite
  .to(myPath.style, 1,
    {
      strokeDashoffset: 0
    }
  )
  .to(myPath.style, 1,
    {
      // Ideally, I could return to the pre-tweened value here
      // without needing to look it up again (or store it in some other way)
      strokeDashoffset: myPath.originalValue
    }
  )

I don't know if that's what you're after, if you don't please provide a simple reduced sample so we can get a better idea.

[cmal]

I'm not opposed to storing the original value on the element, but I think where that could become cumbersome is if I'm using something like staggerTo() to tween lots of different paths at once.

 

In that case, is there a way I can grab that .originalValue off of each path as I'm staggering through it?

[jamiejefferson]

Easiest solution would probably be to just rewind your timeline 

tl.reverse();

Also staggerTo isn't designed for what you've mentioned. If you want to use varying original values with new tweens, just use a loop to create simple tweens in a staggered manner.