Looping Page Load animation is invisible for the first loop only in Chrome

ndunlap · June 23, 2021, 12:34am

I have an animation that loads a looping scroll of logos on a client’s homepage. It worked when I launched the site ~3 months ago, and now there’s a bug. The intended interaction is—the animation lasts for 30 seconds, then loops. Now, the logos don’t even appear on the page until after 30 seconds, then the animation starts and works correctly.

Here is the website pathpoint.com

This is what the page looks like on load. (scroll down to the 3rd section on the homepage)

This is what it looks like after 30 seconds.

Any insight here is greatly appreciated. Thanks!

Here is my public share link: Webflow - Pathpoint 2.0
(how to access public share link)

Stan · June 23, 2021, 8:00am

hi @ndunlap did you tried to set animation initial state?

system is waiting about 24s to load your images.

EDIT: as you can see in this video your animation start but in Chrome doesn’t wait when all images are rendered. Try to set initial state as I have mentioned before and see if this helps.

https://cln.sh/0OForH

ndunlap · June 23, 2021, 4:53pm

Thanks for the reply.

That doesn’t seem to help. I’ve also tried making the animation happen after the page loads, instead of while page is loading. That doesn’t fix it either. It looks to just be some kind of bug, either in Webflow in Chrome, because it works fine in Safari, Firefox, and Chrome on mobile. At this point I don’t really even know what to search for when looking for a solution.

Stan · June 23, 2021, 5:25pm

Hi @ndunlap If does’n not work you can try GlideJS library that I’m using on one page to do endless scroll carousel. see example here.

https://cln.sh/phLo8L

it is very light library with good amount of options, this may solve your issue. But of course there are other libraries that can do same thing.