Jump to content
Search Community

Odd behavior on timeline repeat

tnavarra test
Moderator Tag

Recommended Posts

hi, I've linked to my codepen as it's a bit complicated to explain. It's basically a set of shifting "tiles", I figured out how to make it continuous and it's working great until the timeline repeats itself . If you watch after all 5 tiles have moved around and the timeline repeats itself a couple of the transitions don't behave the same as they do the first time the master timeline plays. Any help is appreciated!

See the Pen VwwEqpw by tnavarra (@tnavarra) on CodePen

Link to comment
Share on other sites

Hey tnavarra and thanks for being a Shockingly Green member! 

 

There's a fair bit to wrap one's head around in your demo. What, specifically, are you wanting us to notice when they "don't behave the same as they do the first time"? 

 

These sorts of errors almost always come from having different values set on the second iteration that weren't the same in the first iteration. So it's probably a matter of properly setting/clearing values after the each iteration.

Link to comment
Share on other sites

hi Zach, thanks for the reply! Sorry for not being clear enough, I was hoping it would jump out. I've cleared/reset all the values to my knowledge, hence my confusion. There are 2 sets of tweens in particular that are different on repeat, in the code pen its lines 46/47  and 49/50.  If you watch all 5 tiles move around (so masterTl plays once) the transition with the #2 grows/slides/shrinks across the width the of grid nicely. On the second repeat of the masterTl it appears to flicker/jerk. I'm assuming it has to do with the left/right values but I've checked and they are the same as when the first play of the masterTl starts. I realize what I'm trying to do is a bit involved, unfortunately I can't use scaleX/Y and transformX/Y due to needing the inner content to flow. 

Link to comment
Share on other sites

That's what I thought but I didn't want to assume anything :) 

 

In both line 46 and 47 you are affecting the same element's width. In the second tween (line 47) you have a negative relative offset of '-=0.4' which means that the tweens overlap by 0.4 seconds. That means that the tweens are in conflict! GSAP has a hard time figuring out which value the width should be because it's being told two different things. 

 

With that being said, you can tell GSAP to ignore the width animation until it has full access by setting overwrite: "none" on the second tween (line 47). That seems to fix the issue. 

 

My question is why does it currently work the first time? I would think it would have that glitch every time without changing the overwrite for the second tween :) 

  • Like 1
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...