Hi, I’ve got this large SVG header text that zooms in when the page is scrolled.
It seems to be massively lagging out / not smooth at all no matter what I do.
I thought maybe it’s because the page itself is a little slow due to multiple videos showing, so I now have them on lazy load with a facade.
Still it’s lagging out. I’ve shrunk the SVG filesize as well and still no difference.
Does anyone know how to smooth out this animation so it’s more of a seemless zoom into the text? Any help will be massively appreciated. Thank you.
My staging link: https://big-week.webflow.io/
Here is my public share link: [LINK](Webflow - Big Week)
Hi there,
To achieve smoother animations in Webflow, here are some optimization tips:
For transition duration adjustments:
- Select the element you want to animate
- Go to the Style panel
- Navigate to Transitions & Transforms
- Set the duration to at least 200ms for smoother motion
- Adjust the easing curve if needed for more natural movement
If you’re still experiencing performance issues, you can disable the default smooth-scroll behavior. Add this custom code to your project settings under Custom Code > Before tag:
document.documentElement.style.scrollBehavior = 'auto';
Additional tips for better animation performance:
- Use the Transform property instead of animating dimensions or position
- Avoid animating too many elements simultaneously
- Consider using the will-change CSS property for complex animations
- Keep animations simple and purposeful
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.