Text Carousel Flickering Issue

[Sgt. Red Pepper]

Hello, 

 

I have been working on an animated, looping banner text carousel, and I have provided a slightly simplified code pen example. 

 

The animation seems to work smoothly, but is interrupted every so often by an inexplicable flicker. You may need to watch the loop quite a few times before this flickering occurs for you. 

 

I want to maintain document flow for my purposes so I'm adjusting the text display settings as part of the animation. I have a hunch that this might have something to do with the issue. 

 

I was hoping someone would be able to take a look at my animation and be able to help me resolve this. 

 

Thanks in advance. 

 

See the Pen wvRVPyP by gee_bee (@gee_bee) on CodePen

[inteltone]

I observed the flickering you point to and noticed that it occurs randomly in terms of timeline repetitions, but definitely after a full timeline repetition has occurred — right before button 1 appears. I tried to use the property refreshOnRepeat: true and it seems this makes your animation work much better.

[Rodrigo]

Hi,

 

Maybe you could try this approach by @Carl in order to create your seamless loop:

 

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

He even created a video explaining how everything works.

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

I'm also curious if you're able to see any flickers at all when using a preview of the next release?: 

See the Pen WNLVzYy by GreenSock (@GreenSock) on CodePen

[Sgt. Red Pepper]

28 minutes ago, GreenSock said:

I'm also curious if you're able to see any flickers at all when using a preview of the next release?: 

 

 

I still see the flickering with the next release preview

[Sgt. Red Pepper]

1 hour ago, valeriyruss said:

I observed the flickering you point to and noticed that it occurs randomly in terms of timeline repetitions, but definitely after a full timeline repetition has occurred — right before button 1 appears. I tried to use the property refreshOnRepeat: true and it seems this makes your animation work much better.

Thanks for the response, but this did not make a difference. 

[Sgt. Red Pepper]

34 minutes ago, Rodrigo said:

Hi,

 

Maybe you could try this approach by @Carl in order to create your seamless loop:

 

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

He even created a video explaining how everything works.

 

Hopefully this helps.

Happy Tweening!

Thanks for the reply. I had discovered this earlier, but I'm not sure this approach will work in my case since I am using the set method in my timeline.

[GreenSock]

5 minutes ago, Sgt. Red Pepper said:

I still see the flickering with the next release preview

I'm unable to see any flickering. Did you try clearing your cache? 

[Sgt. Red Pepper]

10 minutes ago, GreenSock said:

I'm unable to see any flickering. Did you try clearing your cache? 

Cleared cache and hard reload, I'm still seeing the occasional flicker/stutters to the animation. 

 

Is it bad practice to adjust display properties with a set method within timelines? 

 

I want to avoid absolute positioning as there is additional content along with the message in the real life example. 

[ryan_labar]

@Sgt. Red Pepper

Have you tried adding will-change: transform;  to the ".msg-wrap" class? This may fix the stuttering if its caused by browser painting.

[Sgt. Red Pepper]

8 minutes ago, ryan_labar said:

@Sgt. Red Pepper

Have you tried adding will-change: transform;  to the ".msg-wrap" class? This may fix the stuttering if its caused by browser painting.

Thanks for the suggestion, gave it a try, but the issue persists. 

[ryan_labar]

I'd wonder if you set a min-height on the ".msg-contain" wrapper, then animate to height: "auto" on change to account for the possibility of multi line options.

[Sgt. Red Pepper]

9 minutes ago, ryan_labar said:

I'd wonder if you set a min-height on the ".msg-contain" wrapper, then animate to height: "auto" on change to account for the possibility of multi line options.

This doesn't make a difference, I still see the issue even when hardcoding a height

[Sgt. Red Pepper]

@GreenSock I managed to get a screen recording of the flicker issue

 

 

[GreenSock]

Sorry, I didn't have time previously to look at your code but now that I see it, I'd expect it to flash like that once in a while because you've got a .set() on your timeline that changes display to "none" at the very end, and when it repeats back to the beginning of course it gets set to "flex". So what would you expect to happen if the playhead landed EXACTLY at the very end? It'd render at display: none for one tick. See the issue? 

 

Remember that the playhead updates roughly 60 times per second in most browsers but exactly when each tick happens is really up to the device. GSAP is totally resolution-independent, meaning that it dynamically adjusts to ANY time (it's not as if there are just 60 static states that are allowed to exist on the timeline per second). That's why things seem "random" here - it's because the conditions have to be just right for the playhead to land PERFECTLY at the very end of that timeline. Normally it'd be a little be past the end which wraps around to a little bit past the beginning no a repeating timeline. 

 

I'm rather confused about why you even put that set() in there at the end. What's the purpose if you're infinitely repeating anyway?