FOLLOW
All experienced Webflow developers and designers know - when combined with the power of Webflow interactions, lottie .json animation files are definitely magic.
Below you fill find a list of lottie cloneables that will take your website to the next level. Be it small animated buttons, full detailed clone of the Apple AirPods Pro website or animated section background packs… Each Lottie cloneable will help you reuse or learn how to to find, set-up and use lottie .json files in combination with Webflow interactions.
Skip the next part and continue to the cloneable list if you know what bodymovin, .json and webflow interactions are. But be sure to read the next few paragraphs, before you continue to the list if any of these words are new to you!
Webflow .json Files
Lottie is another name for animated .json files within Webflow. While .json files can be used for many different purposes and can contain multiple types of JavaScript object literals, arrays and scalar data.
Within the Webflow community it is common to call them lottie files, because in most cases we are just talking about a small script of animation. All the magic happens when we use this type of .json lottie file and Webflow interactions together.
Webflow Interactions
Before Webflow interactions… There was a JavaScript developer that has been using complex and specific .js libraries, tools and plugins to create even the slightest motion or interaction on any website.
And then there was Webflow. And the design community rejoiced. No need for obscene amounts of code to make elements on the page “move”. Everything can be done from within the interactions panel.
If you’ve never visited that panel in Webflow, press H and start learning!
Webflow and Bodymovin for After Effects
Best repository of lottie files and .json animations is definitely lottiefiles.com. Here you can find animations made by other designers and animators, or even hire someone to make you custom lottie files. Then you can use them in any of your Webflow projects.
Now if you want to make your own animations with after effects, you will need bodymovin adobe after effects plugin. This plugin allows you to to export any type of after effects project as a lottie .json file that you can then import to Webflow.
Website Coming Soon Lottie Animation Cloneable by Walter Ayllon from Pretty Nice Websites
https://showcased.webflow.io/projects/lottie-coming-soon-page
Need a temporary coming soon page and want to make it look more professional and interactive? Maybe it’s for your site or maybe it’s for your client, either way this cloneable has everything you need to make that coming soon page move.
What is in this lottie animation?
Simple redesign, coming soon page template with lottie animation of web designers working on the website. It’s mobile responsive, so you know this one page website can stay there for as long as you need to finish the real website.
Be sure to check here if you need similar animations or want to recolor them. Also if you need a different style of animation, more in the “coming soon” vibe, this is the place to find them all.
What is this lottie animation best for?
- Placeholder page while website in under construction
Bottom line:
😎 Use this cloneable if you need a simple one page placeholder website while your actual website is under construction or in the coming soon phase. Don’t waste time for that one pager, just clone this one and go work on the masterpiece you are building.
F'in sweet Lottie Animations Cloneable by… well, F’in Sweet
https://showcased.webflow.io/projects/fin-sweet-lottie-animations
Looking for one of the best packs for your lottie project? Start here. Who else than the guys from F’in Sweet to deliver the best lottie animation pack out there. Honestly, this design looks so slick, it’s even hard to believe that it’s actually cloneable.
Oh, one more thing - be sure to check how they made that progress timer bar for each animation in the footer.
What is in this lottie animation?
An insane amount of different .json files. More than 40+ different lottie .json files. This means one thing! Clone, upgrade, reuse ideas. The best part about this cloneable that it actually affects the whole page, meaning backgrounds, parallax effects and more.
It’s hard to describe the complexity and creativity of this cloneable, so it’s better if you just check it out and be amazed by yourself without us telling you what to think. When you think about it, it’s what you would expect from the F'in Sweet team, right?
What is this lottie animation best for?
- Used as example for a really complex hero page
- Example of how to work with foreground and background animation using .json lottie files
- Overall, to get a feeling of what is possible when you combine multiple lottie animations with Webflow interactions
Bottom line:
😎 Use this lottie animation cloneable pack if you want to create the most immersive and fine tuned hero section in your entire website. This cloneable is for intermediate to expert level Webflow developers looking to up their lottie game.
Background Lottie Animation Pack Cloneable by F’in Sweet
https://showcased.webflow.io/projects/lottieflow-backgrounds-pack
Another great job from the team of F’in Sweet makes this list. This time it’s some inspiring and simple geometric backgrounds. There’s 17 sections, which means you can choose from many different backgrounds.
All backgrounds in this pack are black and white, but it will be easy to change any background lottie sequence if you need a different color with a bit of customization or custom code.
What is in this lottie animation?
Multiple sections with animated sections ready to be used in your next project. From simple geometrical ones, to bubbly organic ones, to even planets and trippy fractals.
What is this lottie animation best for?
- Used as an animated background in combination with other animations or Webflow interactions
- Beginner to intermediate Webflow developers that want to spice up their project (and learn how to change lottie colour with code)
- Scroll into view element trigger (great example of how to set it up if you never tried it)
- Comes with a few videos
Bottom line:
😎 Use this lottie animation if you are planning to use animated backgrounds and want to learn more about how lottie works with Webflow interactions.
Lottie Hamburger Menu Animations by Ilya Gusinski
https://showcased.webflow.io/projects/lottie-svg-hamburgers
This one is for those who love to play, improve and optimise their navbar to infinity. Hamburger animations can be clean, fast, cheeky, complex or there can be no animations at all. If you need your hamburger menu button animated, you need this cloneable. Period.
More than 10 different animations are waiting for you to be implemented in your next navigation bar. You will definitely find at least one that will fit your next amazing project!
What is in this lottie animation?
Different animated hamburger .json lottie files. From very simple squiggly line motion graphics, to rockets, spaceships and even occultist looking pagan symbols.
Also, there are different animations both for opening and closing hamburger menus, so be sure to check both before you settle on your next hamburger animated icon design.
What is this lottie animation best for?
- Slick and creative website designs
- Modern types of simplified navbars
Bottom line:
😎 Use this lottie animation hamburger pack if you need a simple way to add that more interactive feeling to your or your client website. Be sure to match the animation to the whole site design as some of them are really really specific!
Scroll into View Lottie Animation Cloneable by SketchzLab
https://showcased.webflow.io/projects/lotte-scroll
Planning to learn more about scroll into view animation interaction on Webflow? If you know what it is but never tried it or don’t know what scroll into view is - this cloneable is perfect for you.
While more experienced Webflow devs might not find much use for this cloneable, beginners or those just starting with Lottie animations and Webflow interactions will find this cloneable very useful.
What is in this lottie animation?
Simple showcase on how scrolling animations work. If you really want to learn more about how Webflow scrolling interactions and lottie .json files work, this is the clone you need.
Start walking around, dig around and try to understand how it was set up. Nothing fancy here, just a simple “While scrolling in view - Lottie Scroll” element trigger.
What is this lottie animation best for?
- Complete beginners looking to learn more about Webflow interactions or what lottie .json file is
Bottom line:
😎 Use this lottie animation if you never tried using lottie in your projects and never tried to use Webflow interactions. It’s a great place to start understanding how it all ties together, before you jump into the deep end of this powerful workflow.
AirPods Pro Website Copy Cloneable by Moritz Petersen
https://showcased.webflow.io/projects/airpods-pro-website
We all know why this project is so important and why remaking this marvellous design in Webflow was a must. Showing that you can rebuild one of the most immersive and complex website experiences with Webflow makes all the difference for every Webflow nay-sayer.
Moritz Petersen did it. And he even made a YouTube video that you can follow to learn all about how to build sites like apple. It’s hard to believe that it’s lottie animation and not video, but when you understand how this insane design has been made, your eyes will open for the real possibilities between Webflow interactions and lottie .json files.
What is in this lottie animation?
A real clone of one of the best web experiences out there - Apple AirPods Pro website. What is the most important thing about the image you see (video?) is actually a lottie .json file. If that sparks your interest, be sure to clone this site and watch Moritz video to learn more about it.
What is this lottie animation best for?
- Learning about how immersive and complex lottie animations can be
- Learn how one of best design teams in the world (Apple team) is using lottie to showcase their products
- Get inspirations what you can do for your projects using Webflow
Bottom line:
😎 Use this lottie cloneable animation to learn how the best of the best use .json files, lottie and interactions to deliver breathtaking experiences to the world. Imagine knowing how to do something this great alone, without a big team and budget.
Lottie Button Cloneable by Tim Daff
https://showcased.webflow.io/projects/lottie-buttons
Fun, cheeky and makes your site more interesting to look at? Yes! If you just want to add some flair to your site and make the whole experience more interactive, this is the cloneable you need.
You might not need all of these, and most of these buttons might not even fit your website design, but we are sure you will be able to reuse one or two of these clean animated buttons on any website you are building.
What is in this lottie button pack ?
Different buttons with different animations and interactions. 60 frame interactions on each of these buttons will make your website look and feel different. And when we say different, we mean more immersive and spectacular!
What is this lottie animation button pack best for?
- Spicing up your CTA
- Finding an animated hamburger menu
- Making a custom animated radio button
- Adding an animated like button to your website
Bottom line:
😎 Use this lottie animation button pack if you are looking for something small to make your website “pop” more. These animated buttons don’t make much of a difference, but really improve user experience by making it a bit more immersive and visually interesting.
Have a lottie animation cloneable that could be showcased on this list?
Haven't found what you are looking for? Be sure to check Webflow animation cloneables showcase or drop us a message if you think we missed something here!
Other Webflow Cloneables
Be sure to check out our other best cloneable lists if you found this article about cloneable Webflow lottie animation projects helpful. Here’s a list of other free Webflow cloneable collections that we handpicked for you!
- Best Webflow Background Video Cloneables
- Best Webflow Tabs Cloneables
- Best Webflow CMS Slider Cloneables
- Best Webflow Multi-Step Form Cloneables
- 7 Best Webflow and Airtable Cloneables
- Best Webflow Navigation Bar Cloneables
- Best Webflow Lightbox Cloneables
- 6 Webflow Dashboard Cloneables
- 20 Free Webflow Slider Cloneables
TABLE OF CONTENTS
.png)
