Do you know what most innovative web designs of today share in common?
It's the element of movement. From moving backgrounds to cool page transitions, and interactive features you can click and play with - all of these are made possible through animation. And thanks today’s amazing creators, you no longer need to be a designer or a web developer to incorporate motion into your website.
But here's something to remember: Animation goes beyond simply making your websites fancy. It does so much more. Animation can help your website stand out from the crowd, allow you to tell your brand story in a unique way, create effective user interfaces (UI), and even improve your website's performance.
In this article, we will take a look at some fantastic websites created with Webflow that incorporate Lottie animations. We will also explain how to add Lottie animation to your own project.
Inspiration time!
Here are three websites that we picked which include some incredible animations and effects to spark your creativity.
Living with OCD
Sometimes, it can be quite a challenge to convey an idea effectively using only text. You might write an extensive document, but the reader might still have trouble understanding what you mean.
"Living with OCD" is a website designed by Liviu & Alexandra on Webflow that brilliantly balances the use of text and visuals. Its primary aim is to raise awareness and educate people about Obsessive-compulsive disorder (OCD). OCD is a mental health condition that is often misdiagnosed, misunderstood, and trivialized. Moreover, it aim to be a safe space where individuals can share resources and real stories, with a goal of reducing stigma and misconceptions around OCD.
The site features 3D shapes (all created with Lottie animations!) to lend a fresh and appealing touch to the site. They also facilitate the communication of abstract ideas in unique ways and add a distinctive character to the entire narrative, making it stand out.
The designers mentioned in an article that one of their main challenges was finding the right balance between content and visuals. Despite this hurdle, their hard work is evident and has received widespread appreciation.
M2 Studio
M2 Studio, a Melbourne-based digital agency, used Lottie animations in their recent website redesign. They put these animations in the navigation elements of the site.
On their updated Webflow website, M2 Studio uses Lottie animations to make things move. For example, the "start a project" icon, designed like a rolling stone, loops continuously in an animation. On the other hand, social media icons only activate or play when hovered over.
For the hamburger menu button, in its static form, you just see the three little lines. However, when clicked, it triggers and plays a different segment of the animation, revealing an arrow.
These simple yet cleverly animated navigation elements serve as cues for users. They guide users on what to do next, where to click, and how to interact with the site. It's a subtle, engaging way to enhance user experience and guide site navigation.
Martin Ollivere
You don't need to know coding to create a great website on Webflow. Just look at Martin Ollivere's personal portfolio page. It has some of the best (and fun) scroll-based Lottie animations out there.
As you navigate and scroll through the landing page you will encounter a variety of animations, ranging from dinosaurs to trains to navigation buttons. Despite the complexity of these animations, what remains consistent is the small file size, thanks to the lightweight nature of Lottie. The scroll animations are captivating, facilitating easy reading of the content while maintaining dynamic visual interest.
Want to make your own website like this? The Lottie Player lets you change how your animations act when they're clicked, hovered over, scrolled on, and more. Check out the Lottie Player Interactivity Guide to start adding these effects to your own site!
So how do you add animation to your Webflow site?
Here comes the fun part of creating your own Webflow website! But what if you don't have a team of designers or developers? No problem at all. You can still bring your website to life by embedding thousands of free animations from our LottieFiles library directly into your Webflow project.
With Lottie Editor, you can even tweak colors and text to ensure these animations match your brand identity perfectly.
Once you've found an animation that you love, you can download it as a Lottie JSON file to use in your design, or upload it to your LottieFiles workspace to extract it in dotLottie format. This open-source file format is even smaller than Lottie JSON, which helps speed up the loading time of your website.
To add Lottie JSON and dotLottie files to your Webflow:
- Click the Assets icon in the left toolbar
- Click the cloud upload icon
- Select 1 or multiple files from your computer
Do note that you will need a Webflow subscription in order to upload a dotLottie file. Then, you can add the animations to your site. You can either drag and drop them directly from the Assets panel onto the canvas.
The Webflow design and positioning tool will help you to position, size, adjust the margin of your animation and more
Once it is placed, you can adjust and control the animation further to your liking. Click on a Lottie animation element and go to Element settings panel > Lottie animation settings. Here, you can adjust animation duration, loop, and direction. Once you are satifieide with the animation setting, click on the 'Preview Animation' to see your changes.
When you're ready to share your creation with the world, click the eye icon in the top left-hand corner to preview your work. If everything looks good, click Publish to make it go live.
We hope you found this article helpful. If you're interested in learning more about adding animations to other web development platforms, check out our guides on how to add a Lottie to your WordPress and Framer websites.
So go on, be inspired by the magic of motion and build something amazing! We can't wait to see what you create.
