Streaming live at 10am (PST)

Glitchy Scaling Animation

Hello everybody!

I am working with a scaling animation and notice some annoying glitch at the end of the animation. Please see attached GIF:

Here is my site:

Here is my public share link: Webflow - SIDG

How to play the animation and see the glitch:

  1. Click the ‘window’ in the center, the mask shape will scale up and create a zoom in effect. This animation looks good.
  2. Click the SIDG logo on the top-right corner. The mask shape will scale down and restore. The glitch will happen at the end of the animation.
  3. I found this glitch is reproducible in Chrome/Edge and in a screen size larger than 1920 width.

Hope someone can help! Thanks!

Hi Stella,

I know this problem quite well, it’s basically video player bug on chrome/edge which happens a lot. Please try this code in embed form instead of using background video player in Webflow. It might solve that still not sure about it.

Besides of that I would highly recommend to optimise your background video which is 22mb currently. That’s quite massive for Web. That video shouldn’t be bigger than 2-3mb

<div data-video-urls=“” data-autoplay="true" data-loop="true" data-wf-ignore="true" class="video w-background-video w-background-video-atom"><video autoplay="" loop="" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover"><source src="" data-wf-ignore="true"></video></div>

Please let me know if it would work out.


@zweimillimeter Thanks for your help!

Never realized that this problem might coming from the video! I uploaded the video again (switch with a smaller size video) and the bug was fixed! I can continue using the built-in background video component and it works perfectly now! Save my life!!

Thank you so much!!

You are very welcome!

Just keep in mind that using low size videos is the key for web, the web doesn’t like big sizes specially the mobile.

I always use custom code in embed for videos which i have more control on in terms of responsiveness.