Jump to content
GreenSock

fitzmode

Reset timeline with immediateRender

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to comment
Share on other sites

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

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

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 });
      }
    }
  }

 

Link to comment
Share on other sites

  • Solution

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? 

  • Like 4
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.
×