Jump to content


gsap .set() is not resetting the old value properly

Recommended Posts

There is a timeline with a set. The set is changing a property in the object and the value of the property is empty string. When we jump to the end of the timeline, the color property set to #ffffff, but when we jump back to .progress(0), the value become RGBA(0,0,0,0). It seems like GSAP tries to interpret the target value as color and decides to use RGBA(0,0,0,0) as the original value. 


I think in this case GSAP should reset the value back to empty string on .progress(0).

See the Pen VwmBeyb?editors=1010 by mm00 (@mm00) on CodePen

Link to comment
Share on other sites

I tried this, but in this case instead of the empty string, it always resets to #ffffff;

gsap.config().stringFilter = function(){
  return false;


Link to comment
Share on other sites

Hey Roland. Sorry, but it doesn't work that way. A .set() is a tween with zero duration. So there has to be a set start and end value. It'd be inefficient to force GSAP to revert back to the original value every time. 


If you want that to happen, you can clear it out manually.  Maybe put it in the onUpdate:

onUpdate: function() {
  if(this.progress() === 0) {
    obj._color = "";

Side note: You don't need the new keyword when creating a timeline.

Link to comment
Share on other sites

Thanks @ZachSaucier! Your suggestion works with limitation: if you seek to progress 0.1, the color property is still RGBA(0,0,0,0)


See the Pen eYBjLVw by mm00 (@mm00) on CodePen


I let this case go, I think it is not possible currently what I really need. :)

Link to comment
Share on other sites

You have a zero duration timeline there so a progress other than 0 or 1 doesn't make much sense.

Link to comment
Share on other sites

It's a 1 second duration timeline as the .set's position arguments is 1. 


I made a real world example which shows my problem: 

See the Pen xxRJMbR by mm00 (@mm00) on CodePen


It's a typewriter effect with text selection and removal effect. Also it should change the background and color on HOVER when the animation is not in the selection part. 


The HOVER on the first part of the animation only works on the first run. The second run is not clearing the properties, instead is uses the cached values. 

You can emulate this by commenting "tl.play();" and uncommenting the two lines lines at the same time:



Link to comment
Share on other sites

Some comments:

  • You're using the old syntax. staggerFromTo and the duration parameter of tweens is done away with in GSAP 3.
  • Why not use the repeat property instead of a onComplete callback?
11 minutes ago, RolandSoos said:

The HOVER on the first part of the animation only works on the first run.

That's incorrect. It works with later runs, just get overwritten if the animation changes the colors while a user is hovering it.


I would do the hover effect with JS/GSAP. I would also set the colors in the timeline using functions in .add() instead of .set(). Then use a variable to keep track of the state the color(s) should be and set it to that inside of the hover and .add() functions. It's a whole lot simpler than what you're trying to do. 

Link to comment
Share on other sites

The problem is that I'm developing a software where a lot of things are possible and there is no way to know everything about the environment (normal/hover colors and such.) This is why I tried to use clearing properties with .set() on the timeline as it would guarantee in this case that the HOVER works as expected.


Right now I feel the need for a feature like:

    // remove background and style
  } else {
    // add background and style


Link to comment
Share on other sites

You could do that by using an onUpdate to measure the delta of the progress. If it goes from larger to smaller you know it went backwards.

Link to comment
Share on other sites

That's a good idea. The only problem what I see that if the playhead is exactly at that position and you seek back, your function is not called again, so you have no chance to reset. 


See the Pen zYoLXrX by mm00 (@mm00) on CodePen

Link to comment
Share on other sites

I'm having what I think may be a similar problem, perhaps you can weigh in... I will try to get a minimal codepen ready for you, the problem is that my timeline is several thousand lines long, lives in React, and incorporates dozens of image assets.


The timeline is basically just an extended linear animation, a banner ad, per se, that is 135 seconds long, no user interaction is necessary (although it would be nice to allow for pause and repeat buttons, but I'll worry about those later). All I want it to do is to play through and repeat from the beginning, but on any iteration but the first, things are messed up and do not behave the same as they do the first time through. I noticed in particular that any tween set to repeat -1 would not be firing on the repeat playthroughs, so I went through and calculated exactly how many repeats I'd need of each of those and explicitly set them, but this didn't seem to consistently apply the desired effect to every single case.


It seems like I shouldn't have to do anything special to make this happen, the documentation seems to indicate that repeating a timeline without change should be the default behavior. If I try invalidating the timeline on repeat, that helps the repeater tweens but screws up the initial positioning of a bunch of other elements. The behaviors seem so random and unpredictable that I've tried just recording a screen capture of the entire animation to use in place of the actual GSAP timeline, but the video quality just isn't as sharp as the original.

Link to comment
Share on other sites

@billyZduke just a shot in the dark here, but have you tried setting the overwrite to true or auto?


  overwrite: true

Does that make any difference?

  • Like 1
Link to comment
Share on other sites

I had overwrite set to 'auto', when I set it to true the wonkiness goes way up, it doesn't even appear to be playing anymore.


No, wait... true may have done it. I've also got it initially paused and played by scrolltrigger, and I think that was where the additional wonkiness was coming from.

Link to comment
Share on other sites

A minimal demo is worth 10,000,000 words.

  • Haha 3
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.