What is the solution for elements blurring and moving during animations in Webflow?

If elements are blurring or shifting during animations in Webflow, it's often due to browser rendering issues, subpixel positioning, or CSS properties like transform. Here's how to fix it:

1. Use Transform: Translate3D Instead of Left/Top

• Avoid using left, top, right, or bottom for animations.
• Use transform: translate3d(x, y, 0) instead, which triggers GPU rendering and prevents blurring.
• In Webflow, apply "Move" under the Transform section instead of adjusting the position manually.

2. Set will-change: transform

• Some browsers optimize animations better if they know what will change.
• Go to the Elements' Custom CSS (Before/After) and add:
• will-change: transform;
• This helps ensure smooth animations by optimizing rendering.

3. Ensure Whole Pixels for Positioning

• Webflow sometimes positions elements at fractions of a pixel, causing blurriness.
• Manually check and adjust positioning values (e.g., 50.234px → 50px) in the style panel.

4. Increase Font Rendering Quality (If Text Blurs)

• Text often blurs when animating opacity or transform.
• Add text-rendering: optimizeLegibility; in custom CSS to improve font clarity.

5. Avoid Scaling Elements Too Much

• Scaling (transform: scale()) can lead to pixelation and blurriness.
• Use images/icons in a higher resolution if you need scaling effects.

6. Use Higher Render Settings for Webflow Lottie Animations

• If using Lottie, increase the render quality inside Webflow by setting "Rendering" to "SVG" instead of "Canvas."

7. Reduce Motion Blur by Using ease-out or linear Easing

• Some easing types (e.g., ease-in-out) can cause blurring.
• Try switching to "Linear" or "Ease Out" in the Webflow Animation settings.

Summary

To fix blurry or shifting elements during animations, use transform: translate3d(x, y, 0), enable will-change: transform, avoid fractional pixel values, and choose smoother easing options. Also, ensure text rendering is optimized and minimize excessive scaling for clarity.