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

(Remember to like it ❤️, it helps a lot)

Feel free to clone the project and steal the interactions 😉

If it was helpful, like the project!

matteofabbiani

Matteo Fabbiani - Personal Website & Portfolio

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 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 👉 bjorn-encutescu.webflow.io/

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

Plink Webflow Rebuild

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

AirPods Pro

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

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

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

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

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

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

Landing page created for my latest Youtube tutorial about how to create 3D scroll animations using Lottie + Webflow.

Link for the video: https://youtu.be/vMxCjhi-3p4

FantomUI Landing Page

Fantom.UI - Free landing page

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

***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

Very contemporary! Another website, another draft and experiment with my so called "grid" style. Added custom cursors, accordion, sticky containers, lottie burger, etc.

Still working on it – feel free to clone.