Jump to content
Search Community

Transformed elements not resetting when replaying Timeline

green_machine test
Moderator Tag

Go to solution Solved by Carl,

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

Hey guys,

 

Been a lurker here for a few years, but never needed to ask a question until now, so thanks for anyone that can provide any info.

 

Working on a little SVG chess animation, as you can see in the pen. I have the timeline set to repeat. On the initial playthrough, the elements all appear correctly and animate as I've coded them to. But on any subsequent plays, you'll see that some elements jump or appear differently. I'm assuming this has something to do with the transforms I'm applying to them. If so, is there a way for all of the elements to "reset" to how they start at the beginning of my timeline on the first play? 

 

Thanks, in advance.

See the Pen ZGZvgZ by dsenneff (@dsenneff) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome from out of the shadows!  :)

 

Thanks for the demo.

There are a lot of tweens in there so it is hard for me to study it and find the ones that are causing the problem but its an overwrite issue.

Basically when 2 tweens fight for control of the same properties of the same objects the newer tween will overwrite and kill the previous tween.

When you go to play your timeline again, the killed tweens are gone. 

 

This is most likely happening where you are using negative offset values like "-=0.3" 

 

Please add this code to the top of the pen

 

TweenLite.onOverwrite = function(overwritten) {
console.log("overwrite!")
console.log(overwritten.target)
console.log(mainTL.time())
}
 
open the console and it will give you the time at which the overwrites happen and the targets of the overwritten tweens.
 
You can try removing the overlap, or adding overwrite:"none" to the tweens that are doing the overwriting.
  • Like 3
Link to comment
Share on other sites

Carl, in my haste I must've gotten too careless with the position parameter on my tweens, so I'm going to adjust some of those. I also did some fiddling for the occasions where I will need to handle the overwriting, so pointing out that parameter was a big help. Of course now that you pointed it out, I see it in the documentation where I must've read right over it. Thanks.

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...