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

📌📌 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.

Lottie Bodymovin Animations

Flowbase - Lottie Animations in Webflow

Testing out the aftereffects/lottie pipeline for webflow! The entire animation is one aftereffects sequence rendered as JSON using the bodymovin plugin.  Im using a scroll-driven interaction timeline in webflow to scrub through the svg animation and toggle the text on/off for each section as the user scrolls through the page

lottie svg test

simple SVG sequence on scroll

Portfolio website design and development for Henry Northington, a writer, creator, and brand specialist.

The site aims to showcase Henry’s personality as well as his work through an interactive pixel-based, retro word-processor style journey.

Super fun to design and build from beginning to end. Big thanks to Henry for the opportunity to build something unique and packed full of enjoyable moments.

View the live site here ↓
https://www.henrynorthington.com/

Henry Northington Portfolio

Hey Webflow fam! 💙

Today I wanna share a special interactive component with you that I made for one of my previous personal websites. It's an interactive call-to-action toggle that expands into contact options. Perfect to put on the right bottom corner of your website! 

⚡️ Interactions are completely done in Webflow Interactions without custom code. 
✨ The icon animations are made with Lottie. 

Feel free to use this in your projects! 

If you like this freebie share it with your Webflow friends and leave a follow or like to never miss a new freebie! 💎

Cheers,
Cédric

Interactive Call to Action Button

Call to Action Toggle

same principle as my last experiment, only this time encoding video frames into the Lottie file instead of vector paths! the resolution and layout is optimized for mobile right now (check it out on a mobile device!) but i still tried to make it work for desktop

quibi

3D transitions on scroll (pre-rendered)

Took an hour of my Sunday to create this little link lowdown site. It's perfect to link it on social media profiles to get user leads to the right places. 

✅ Native Interactions
💾 CMS driven
❌ Custom Code
🆓 Cloneable

Feel free to clone this and use it for yourself on your website! 

Follow me for more Webflow freebies in the future 💙
--
Signup for my newsletter to never miss a freebie: 
https://cedricdesign.substack.com/

Link Lowdown

A bar called Gemma - One of the most loved bars in the heart of Stockholm, Sweden.

A Bar Called Gemma

A bar called Gemma

by Hernan Torrisis
Github page: https://github.com/bodymovin/bodymovin

Hernan torrisi's First Site

Bodymovin test

Webflow

Create a 3D animation in Cinema 4D and import then animate it in your website.

Full course, plus downloadable assets: https://wfl.io/after-effects-lottie

Versive

After Effects & Lottie | Creating a galaxy in Cinema 4D and animating in Webflow

Learn how to use Cinema 4D and After Effects to render a 3D phone as an image sequence, then import the sequence into Webflow to tie the animation to a website's scroll position.

Full course, plus downloadable assets: https://wfl.io/after-effects-lottie

World's thinnest smartphone

worlds-thinnest-smartphone

"An artist who aspired to be a designer and a designer who aspired to be an artist."

I finally got to my portfolio and completely redesigned it to the state that suits me. So right now website is fully available. 

Awwwards, FWA, CSS Design Awards, Behance - soon. 
Cheers!

Artemii Lebedev

Artemii Lebedev, Portfolio 2023

Search for dog walkers nearby with a list of verified users, read reviews, and make sure your dog is in good hands.

Walker App

walker-app

This is my new portfolio. I've tried to push myself into using parts of Webflow I hadn't touched before. Hope you like it!

Tom Alexander Design

Personal Portfolio

Yael Hubert

Yael Hubert's Design Portfolio

Your Life - Landing Page

Your Life

Added Insight is an umbrella company of Capability Group, with a focus on psychology and psychometric testing.

Discover bodymovin websites built by the Webflow community

Discover bodymovin websites built by the Webflow community