I have an issue with my Webflow project that I can’t really figure out how to solve.
For context, I am building the website for my company using a Webflow template called “Colours” from Lucas Gusso.
My problem is this:
There is a “companies that trust us” - logos grid that is animated using slide in interactions.
On desktop, it’s all looking perfectly fine!
On mobile however, when I scroll down on my site, the animation is super laggy.
See this video:
While in the template, the same animation looks perfectly smooth:
To fix the laggy animation on mobile, try simplifying the slide-in interaction by reducing the number of elements animated at once, and adjusting the duration and easing for smoother transitions. Use transform (like translate or scale) and opacity instead of properties like top or height, as these are more performance-friendly and don’t trigger reflow or repaint. You can also create a separate, lighter interaction for mobile or tablet views to improve performance on smaller devices. Additionally, avoid excessive scroll-based animations, as these can be taxing on mobile. Ensure that any images or media are optimized for mobile to prevent slowdowns. Finally, test the website with interactions disabled to see if the lag is related to the animations themselves, and use browser developer tools to pinpoint any performance issues. Feel free to contact me if you face any issues along the way.
Thank you for your advise!
I appreciate it!
However unfortunately that can‘t be the issue. I haven’t made any changes to that logo grid element (it‘s the same unedited thing as on the template). And when I make a direct cloned site from the template, the issue is not present
