Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
tnavarra

Odd behavior on timeline repeat

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

Share this post


Link to post
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.

Share this post


Link to post
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. 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thank you!!! That's perfect. I was honestly surprised it worked the first time, so that makes sense.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×