Glitchy Scaling Animation

Design help Animations & Interactions
1

Hello everybody!

I am working with a scaling animation and notice some annoying glitch at the end of the animation. Please see attached GIF:
Screen-Recording-2021-03-30-at-7.16

Here is my site: https://dlx-sidg.webflow.io/

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!

2

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=“https://s3.amazonaws.com/webflow-prod-assets/6053f0a529d35890706bd8a1/60623d8dc3b516b213381e81_SIDG%20Website%20Video_v06.mp4” 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="https://s3.amazonaws.com/webflow-prod-assets/6053f0a529d35890706bd8a1/60623d8dc3b516b213381e81_SIDG%20Website%20Video_v06.mp4" data-wf-ignore="true"></video></div>

Please let me know if it would work out.

Best
Barry

3

@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!!

4

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.

Best
Barry