What is the solution for elements blurring and moving during animations in Webflow?
TL;DR
- Use whole pixel values in transforms and positioning to prevent sub-pixel rendering and blurring.
- Force GPU acceleration with 3D transforms (e.g., translate3d) to ensure smoother animations.
- Avoid opacity transitions on text; use movement or scale, and apply backface visibility to improve font rendering.
- Add the will-change property (e.g., will-change: transform) to hint the browser to optimize for upcoming changes.
- Check for overflow issues and avoid animating within flex or grid containers with dynamic sizing.
Elements blurring or shifting during animations in Webflow typically occur due to browser rendering issues such as sub-pixel rendering, improper GPU acceleration, or improper positioning.
1. Use Round Pixel Values in Transforms or Positioning
- Avoid fractional values (like
23.7px) in transforms, top/left positioning, or spacing. - Set values to whole numbers to reduce sub-pixel rendering which can cause blurring or jittery movements.
2. Force GPU Acceleration
- Apply GPU acceleration to smooth animations and prevent blurring.
- Add a transform property (e.g.,
transform: translate3d(0, 0, 0)) via custom code or use Webflow’s Style panel: - Add a transform with X, Y, and Z set to
0. - This forces the browser to render the element using the GPU.
3. Optimize Font Rendering
- Text blurring during animations is often caused by how browsers rasterize fonts.
- Reduce this by:
- Avoiding opacity transitions on text elements—use movement or scale instead.
- Applying backface-visibility: hidden via custom code or under advanced typography settings.
4. Use will-change Property
- Add the will-change property to tell the browser to prepare for an animation:
- Use custom code to add
will-change: transform;orwill-change: opacity;based on what you’re animating. - Helps prevent layout shift or rendering glitches during transitions.
5. Check for Overflow and Containment Issues
- Ensure parent elements don't have overflow: hidden that might clip or distort during animations.
- Avoid animating elements that are inside flexbox or grid containers with dynamic sizing, unless necessary.
Summary
To fix blurring or movement issues during animations in Webflow, use whole pixel values, enable GPU acceleration with 3D transforms, apply will-change, and avoid opacity transitions on text. These steps help ensure smoother, crisper animations in all browsers.