I have the hero title and subtitle slide in. I also have 3 rive animations (the eyes) loading and coming in. As you can see in the live site or in the video (link below), the start of the text animation is sluggish. How could I make sure the animations run smoothly? Do I somehow delay them until everything else is loaded? Should I make some page transition – https://www.dria.com/ – to keep the eye busy and only start the animation later? Should I add a loader?
I would obviously love for the site to be super light to load, and maybe that’s the thorough solution, but at this juncture, it seems like a diffcult thing to achieve (would love any concrete help if anyone has the time). But for now I’m focusing on shipping soon as I need to send the site next week - so focusing on getting those animations running smoothly.
A preloader can indeed help improve animation performance by ensuring all assets are properly loaded before displaying your content. Here’s how you can implement one effectively:
Adding a preloader in Webflow can be done using either a text element or a Lottie animation. Lottie animations are recommended as they’re lightweight SVG files that maintain quality at any resolution. To implement the preloader:
Create a new div that covers the entire viewport
Add your loading indicator (text or Lottie animation)
Set the initial display state to “flex”
Create an interaction that hides the preloader once the page loads
Add a smooth fade-out transition (300-500ms) for a polished experience
For optimal performance, keep your preloader assets lightweight and compress any media files used in your animations. Consider using Webflow’s built-in asset optimizer for images and implementing lazy loading for content below the fold.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.