Discover the best lottie websites created by professional designers. Get inspired and start planning your perfect lottie web design today!

Finsweet

We love lottie animations! We built lottieflow.com to prove it!

Lottieflow Hero

Lottieflow.com Hero

Another year, another iPhone, another website rebuild!

iPhone 12 Pro

iPhone 12 Pro Rebuild

🏆 Website of the Day – CSSDA
🏆 Honorable Mention – Awwwards
🏆 Best UI Design – CSSDA
🏆 Best UX Design – CSSDA
🏆 Best Innovation – CSSDA

ESE Media created a website for the local business Star Bicycle to cement their place in the market as the specialist for the highest quality bikes and services. The home page serves as a digital experience of in the company and their values.

for more information on the project visit www.esemedia.ch

Design and Build by @severingamper
for ESE Media GmbH

Star Bicycle (Outdoor)

Star Bicycle Bike Shop

I'm a brand designer and this is my personal marketing website and portfolio.

Feel free to clone the project and steal the interactions 😉

If it was helpful, like the project!

matteofabbiani

Matteo Fabbiani - Personal Website & Portfolio

I rebuild Plink's website in Webflow because I really liked the interactions they have created. I thought it would be cool to learn how to create them in Webflow, and also to make it clonable for others to have a look at and learn how to create these interactions too.

Custom code was used, but there are just a few simple lines.

Plink's website for comparison: https://useplink.com/en/

--

Tutorials incoming on my YouTube channel, subscribe 👉 youtube.com/channel/UCgwvah4M6Anta4_5ACFiuRQ

--

• Do you need web design & development? Get in touch 👉 brandenstein.co/team/andreea

• Follow my daily tips on Instagram 👉 instagram.com/andreea_uaui

• Connect with me on LinkedIn (please, tell me in the note the reason you want to connect) 👉 linkedin.com/in/uauizaui

Plink Webflow Rebuild

AirPods Pro

With the new Ghostbusters movie coming, I wanted to build a proper movie site for such an amazing franchise. Celebrating the new and showcasing the originals.

I've also made the project cloneable. I'm new to development and have pulled snippets from multiple different projects. I still have a lot to learn but if this project is helpful to you, that's awesome!!

Features and Accolades
• Mocktober 2020 winner
• CSS Design Awards
  → Special Kudos
  → Best UI Design
  → Best UX Design
  → Best Innovation
• CSS Winner: Site of the Day
• One Page Love
• Muzli 

All visuals belong to their respective owners.

GB-afterlife

Unofficial Ghostbusters Afterlife Website

I had some fun with a minimal redesign of Sam Altman's blog to practice some subtle interactions and Lottie.

Feel free to clone and use 🙂

Sam Altman blog concept

Free Lockdown template. 
Live stream of this video. https://www.youtube.com/watch?v=obTXWd8BiOs

Flexbox Layout - Load animation - Custom two click slider made inside of Webflow interactions. Slide out panels. Ticker tap animation and much more. 

Have a play!

Enjoy

Design Direction Live 001

Honest Beauty Template

As you scroll, the phone moves into various positions. The lottie animation was exported with the Rotato app (https://www.rotato.xyz)

Rotato Web Export Example 2

Scroll to rotate 3D phone

Live: thefinishlineisnevertheend.com

In October 2019, Digitas UK created a high-octane sequel to the acclaimed ‘Powered By Honda’ film released in April 2019 to celebrate Honda’s endless race to success, and return home to the Japanese Grand Prix.

This site was created to dig deeper into each race and the victory's that unfold. 

Creative Director: Jonny Palmer
Chief Creative Officer: Emma De La Fosse
Lead Designer & Developer: Joseph Berry
Art Director: Ryan Timms
Copywriter: Lucy Green
Strategy Partner: James Whatley
Client Director: Jared Howe
Client Lead: Clementine Clough
Agency Producer: Emma Gilbert
Sound Design: Strings & Tins
Director/Production Co: Mainframe
Producer: Philip Archer
Lead 3D editor: Jonathan May
3D artists: Duncan Tune, Marcus
Fernandes, Roger Chiaw, Nick Lyons, Richard Payne, Diogo Dias

Honda f1 history

Honda - The Finish Line Is Never The End

Flowcraft

Just a few buttons I've designed recently and used on projects. Feel free to clone away!  I'll keep adding to it as I design more.  👍

Current Buttons:
– Several hamburger menu buttons
– Scroll down indicator
– Checkbox tick
– Checkbox
– Splashy button thing.
– Working Toggle
– Click to Like Heart Button
– Call button
– Hover and loop button

Lottie Buttons

Recreated the Cuberto contact form in Webflow as a test project

Watch the tutorial for this at https://www.youtube.com/watch?v=SeMvDIgOS4o

Interactive Form

Hello, I'm a creative freelancer based in France.
Welcome on my personal dashboard!

Have fun with all the interactions I designed :)

Pierre-Louis

Pierre-Louis Creative Freelancer

A company from Quebec (Canada) working on the first human skin enhancement for performance-driven athletes.

Stellar Skingrip

STELLAR

***Hiring Webflow Designers (2-3 people) to help me develop websites for my clients and be my protegé (paid).*** 

Learn more: https://forum.webflow.com/t/seeking-webflow-designer-apprentice-paid/173777
___________________________________________________

Hi Everyone, this is a portfolio I created, I would love to see what you guys make out of it. Feel free to comment your finished site below.

Tools Used:
- Premiere Pro (Creating the Camping App Thumbnail)
- Photoshop (Painting City & Artworks, Designing Software Box & Noggin Thumbnail)
- Mockupworld.com (To find a 5 device mockup for Noggin Thumbnail and Software Box for Fitform Thumbnail)
- Canva.com (Minimizing, Resizing Photos, Creating the BTF Thumbnail and Robotics Thumbnail)
- Lottiefiles.com (Bubble animation)
- Webflow (All the cool interactions you see)

Thank you @johnnygu and @WebDevForYou for inspiring some of these cool animations.

First Portfolio Website

My Portfolio Website

I finally finished my Webflow portfolio! Tried to design something minimal but bold at the same time, focusing on clean and smooth interactions, and putting my projects up and center. Happy with the result!

Diegoliv.works

📌📌 WEBFLOW NOW SUPPORTS LOTTIE NATIVELY 📌📌

Learn More about it @ https://university.webflow.com/courses/after-effects-lottie
---------------------------------------------------

Hey! 🙌🙌

Here's a detailed guide on implementing animation inside of webflow using Lottie's bodymovin JS’. 

View the full guide here: https://www.flowbase.co/guides/lottie-webflow

Lottie is a fantastic way to add some extra wow to your web designs, or to help communicate complex messages without limiting creativity or your sites speed. 

In this guide I will explain how to get started with lottie and how to you can add lottie to your own projects. 

I'll also show you some custom code that will get you started with simple JS controls for hover & scroll into view. 

If you're interested in more content like this please consider following us and showing support :)

Need Help? Contact us.

Discover lottie websites built by the Webflow community

Discover lottie websites built by the Webflow community