Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vool.Studio

TimelineMax loop repeating flashing after a while

Go to solution Solved by Jonathan,

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, 

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

Link to comment
Share on other sites

  • Solution

Hello hello@lorenzobocchi.com, 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 :)

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Glad you got it working, Happy Tweening! :)

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