Jump to content


Tween to original CSS

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

Is it possible to tell TweenLite to tween a CSS property to its original value? For instance, let's say I have the following CSS:

.box-1 {
  opacity: 0.8;

.box-2 {
  opacity: 0.6;

And then I apply the following TimelineLite animation:

tl = new TimelineLite();

tl.staggerTo(['.box-1, .box-2', 1, {opacity: 0}, 0.5)
  .staggerTo(['.box-1, .box-2', 1, {opacity: ???}, 0.5)

I want to restore each of these elements to its originally set opacity, but still be able to use staggerTo and keep the value in the CSS.


Any shortcuts here?

Link to comment
Share on other sites

Why not set the opacity value as a variable and then use staggerFrom on the second line?


var opacityValue= 0;
tl.staggerTo(['.box-1, .box-2'], 1, {opacity: opacityValue}, 0.5)
.staggerFrom(['.box-1, .box-2'], 1, {opacity: opacityValue}, 0.5)

  • Like 1
Link to comment
Share on other sites

Hi Saracen, two reasons:


  1. As you can see from the CSS I included, each of the elements has a unique opacity set in the CSS. staggerTo tweens each element to the same opacity, so this won't work.
  2. It'd be nice to keep these values in the CSS with the rest of my styling for these elements.
Link to comment
Share on other sites

Hi Cmal,
If you notice from my example I changed staggerTo to staggerFrom. This will tween each box from 0 to its css value I believe

Link to comment
Share on other sites

Actually, looks like I misread your comment. But I tried your idea and staggerFrom doesn't seem to work. As far as the staggerFrom is concerned, the current values are the result of the first staggerTo, not their original values as set by the CSS.

Link to comment
Share on other sites

Weird that you should get that. I just tried it quickly and the staggerFrom is returning back to the css based opacity

Link to comment
Share on other sites

Saracen, you're right, that should work.


If anybody else knows of a way to get TweenLite/TimelineLite to tween back to an elements original state (prior to any tweens being performed) without using "from" please let me know, as I would still have a lot of use for that.

Link to comment
Share on other sites



The stagger from will create the problem of immediate render, meaning will set all elements to opacity:0, and if you add the immediateRender:false to the vars the elements just fade out, because when you tween an element from opacity:0 it fades in, but your elements already have an opacity:0 property therefore nothing will happen, they'll go from zero to zero.


What you could do is reverse the timeline and take advantage of a very cool feature of the engine that it records the starting values, so you can repeat the timeline and add yoyo:true to the vars, but you'll have to use TimelineMax. If you want to use TimelineLilte you could add an onComplete function that reverses the timeline.


Another chance would be to use the engine to set the element's opacity instead of doing it through the CSS, and add another stagger to the timeline, like this:

var opacity_1 = 0.8,
    opacity_2 = 0.6,
    tl = new TimelineLite();

TweenLite.set('.box-1', {opacity:opacity_1});
TweenLite.set('.box-2', {opacity:opacity_2});

    .staggerTo(['.box-1','.box-2'], 1, {opacity:0}, 0.5)
    .staggerTo('.box-1', 1, {opacity:opacity_1}, 0.5, 'label')
    .staggerTo('.box-2', 1, {opacity:opacity_2}, 0.5, 'label');

The final stagger is done twice because each element has it's own opacity, but they're added at the same position in the timeline: "label".


Hope this helps,



  • Like 2
Link to comment
Share on other sites

Yep, Rodrigo pretty much said it, but to reiterate, if you just want to set the values back to their originals, you could rewind the tween/timeline. You don't even need to play it in reverse if you don't want to - you can jump to the beginning (which immediately sets the values to their originals):

var tl = new TimelineLite();

//then later, pause it at a time of 0 (the beginning)...
  • 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.