Jump to content
Search Community

Restart timeline with transforms issue

Anya test
Moderator Tag

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

Hi guys, 

I'm having an issue with restarting a master timeline with nested timelines and understanding to how properly clear props from elements.

Basically, I have svg that uses symbols that have inline transforms on them applied when exporting from Illustrator.

I'm animating x and y values. Then on btn click, I would like to completely restart and reset the animation and elements transform to initial values. 

The issue is that when I clear all props or just transform, it's removing the inline transform values that are coming from svg. But I would want to revert them back to initial state.

Is there a way to achieve it?

Hope my demo is helpful enough to show.

Thank you!

 

See the Pen pmOjLz?editors=1010 by slyka85 (@slyka85) on CodePen

Link to comment
Share on other sites

Is there a reason you wouldn't just rewind your timeline to make things go back to their initial values? Like animation.progress(0) or animation.time(0) or animation.pause(0). If you want to revert the values and kill the animation, you could just animation.progress(0).kill(). 

 

There seemed to be a lot of extra (unnecessary) code in that demo, so I'm wondering if perhaps I'm missing something. Why exactly are you trying to clearProps? And if you're trying to restart your animation, why not just call .restart() on it? 

  • Like 1
Link to comment
Share on other sites

I'm making a game, where on different clicks, different animations are triggered that have nested timelines and tweens, and values that are being animated, for example "x, y, fill color, scale, velocity, gravity, bezier paths, autoAlpha, rotation etc" on different elements. 

When the game is over and to play the game again, I need to reset all those values to the initial ones so the user can play again. 

In 'clearTargetAnimations', I'm basically gathering all the targets from the functions that return timelines and nested timelines and clear all props on them. But with the inline transform, clearProps will remove those too, and I'm not sure what other method to use to basically reset elements styles to initial state.

Link to comment
Share on other sites

Well, if you don't want to just rewind your animations, you could simply record the state initially for the elements, and revert as you please. Like just record the style.cssText as well as the "transform" attribute, and then re-populate those when you need to reset those. See what I mean? 

  • Like 2
Link to comment
Share on other sites

oh wow! thank you so much, It took me some time to understand what was wrong with my timelines returned via functions. Everything works like a charm now!

".pause(0)" did the trick the way I needed to reset to initial states. 

Million thanks your way! 

  • Like 2
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.
×
×
  • Create New...