Reset timeline with immediateRender

[fitzmode]

I have a `from`  tween where `immediateRender` is `false` that animates an object's x position value from -500.

However, after the tween is played, setting `timeline.pause(0)` resets the tween to the position where x is -500.How can I reset the animation to the original position where x is 0?.

 

See the Pen GRjKNOL by anesumuz (@anesumuz) on CodePen

[ZachSaucier]

Hey fitzmode. It sounds like you want to clear the properties:

timeline.pause(0)
gsap.set('.box', {clearProps: true})

 

[fitzmode]

Thanks Zach,

 

This seems to be the solution for my contrived example. Is there a way to clearProps on an entire timeline with multiple targets and multiple tweens or do I have to loop over all the targets and set clearProps on each individually?

[ZachSaucier]

The best way to do that probably depends on your setup. You could always get the timeline tweens, get the tween targets, then loop through each and clear the properties. 

[fitzmode]

Noted thanks. One more issue arises - clearProps seems to work fine on DOM elements but when I try to apply this on a custom non-DOM objects (animating canvas shapes)  I get the warning:

Invalid property clearProps set to true Missing plugin? gsap.registerPlugin()

Does clearProps only work with DOM / CSS animations or am I missing something?

Here's my attempt to clearProps on nested tweens and timelines. 

  function clearProps(timeline) {
    const targets = timeline.getChildren();
    for (let i = 0; i < targets.length; i++) {
      if (targets[i].constructor.name === 'Timeline') {
        clearProps(targets[i]);
        return;
      }
      if (targets[i].targets().length) {
        gsap.set(targets[i].targets(), { clearProps: true });
      }
    }
  }

 

[GreenSock]

clearProps is literally for removing inline CSS properties of DOM elements - that's not for canvas-based stuff.

 

If I understand your goal correctly, you don't actually want to clear the properties, right? You just want to return the properties to the pre-"from" values on that first tween in your timeline? The problem with the way you're doing it now is that you put that tween at the VERY start of the timeline, so when you pause(0), it puts the playhead right on top of where you told it to apply those "from" values. It is doing what it's supposed to. So you've got two options: 

1. Position your tween so that it's not at the very start. Like...offset it literally by 0.001 or something so that when you pause(0) it's going to a place BEFORE the from(). 
2. Just pause(-0.001). 

Does that help?