Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cmal

Return to original value

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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
    }
  )
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×