TimelineMax loop repeating flashing after a while

[Lorenzo Bocchi]

Hi, 

I'm having an issue using TimelineMax with a loop repeat. 

The animation works fine but sometimes there's some sort of "flashing" in the animation. 
It looks like the div inside is repositioned for a millisecond in the wrong place. 

I cannot understand why this happens and why it happens randomly. 
I linked a Codepen working example.

 

Any ideas? 
Thanks! 

See the Pen xEbjWQ by LorenzoBocchi (@LorenzoBocchi) on CodePen.

[Jonathan]

Hello [email protected], and welcome to the GreenSock Forum!

 

Thank you for creating the codepen

 

I looked at your example on Window 10 in latest Chrome and Firefox but do not see this white flash. I tried multiple reloads of the page but could not replicate this. Sound like a browser bug!

• What browser did you see this on?
• What browser version did you see this on?

Any additional info will help us help you

[Lorenzo Bocchi]

Hello Jonathan, 
Thanks!
And thank you for your reply. 

My bad, I'm sorry. I kept working on that pen and I solved it. This is why you cannot find the issue. 
Please forgive me, I am a designer and I never used Codepen before.  

Here you can find a new version with the issue: 

See the Pen GjpKJp by LorenzoBocchi (@LorenzoBocchi) on CodePen.

 

Basically I changed this timing from "0.01" to "0" .add(TweenMax.to('.line-inside', 0.01, {x:"-200%", opacity:1})) and now it's not flashing anymore. 
The affected lines was:  (JS – Line 2 and 4). 

Thanks!

[Jonathan]

Glad you got it working, Happy Tweening!