Lottie 1st page load

Design help Animations & Interactions
1

Hi! My lottie animation works great, but is kind of wonky on the first time the page is loaded which is the most important one, and only. Any way to make that smoother? thx

Live site: https://www.spicyspousepodcast.com/

Read-only: https://preview.webflow.com/preview/spicy-spouse-podcast?utm_medium=preview_link&utm_source=designer&utm_content=spicy-spouse-podcast&preview=67c78a492cd600dd090945deba9bae2e&mode=preview

2

Hi,

If you change the render mode to SVG, then it is much smoother.

23
23458×504 11.5 KB

3

I tried that as well, SVG seems to make it worse, check it out now.

4

Very strange, it’s nice and smooth for me? Maybe it’s a connectivity issue? You could add some blank keyframes to the beginning of the animation to delay it? Or have it triggered when the element is actually loaded? It may be that you’re using it in a pre-loader, so the actual Lottie itself is not loading fully before it is displayed?

5

im playing with the delay now, it seems to help. thanks for the extra eyes :eyes:

I set an animation on the Lottie interaction inside the preload wrapper and used the built in integration to target it. I set it to hide/show with a delay of 1s and then picked the key frames spaced out over time to to match the length of the animation, works great now.

52%20AM
52%20AM488×1268 46.2 KB

1 Like
6

I am having same issue, I’m performing a final test of the website at 5Mbps to see how it performs on a slow internet, and my entire page even with the background video loads faster than the lottie button. It seems that some scripts for the lottie are taking a long time to catch up?

7

I figured it is probably related to a bunch of unused fonts that were loading , I deleted the fonts and now it seems to load fast.