fitzmode Posted November 24, 2020 Share Posted November 24, 2020 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 More sharing options...
ZachSaucier Posted November 24, 2020 Share Posted November 24, 2020 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 More sharing options...
fitzmode Posted November 24, 2020 Author Share Posted November 24, 2020 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 More sharing options...
ZachSaucier Posted November 24, 2020 Share Posted November 24, 2020 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. Link to comment Share on other sites More sharing options...
fitzmode Posted November 24, 2020 Author Share Posted November 24, 2020 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 More sharing options...
Solution GreenSock Posted November 24, 2020 Solution Share Posted November 24, 2020 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: 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(). Just pause(-0.001). Does that help? 4 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now