In the ever-evolving world of web design, keeping your creative spark alight often means soaking up inspiration to either ignite new ideas or fuel your existing projects.
Luckily, the internet is full of inspiring websites to see. Whether creating a new brand site to enhance your story or following the latest design trends to improve UX, remember this: motion is your key to creating an unforgettable and engaging, ensuring visitors return.
Let's fuel by feasting your eye on these 10 captivating Webflow websites that add Lottie animation to elevate the experiences.
1) Overseas
Nestled in Tenerife, Overseas is a celebration of Asian cuisine, where tradition meets modernity.
The website features animated black ink that draws on traditional Chinese art, combined with minimalist designs and European influences. The animations are not just visual treats; they're integral to the storytelling, enhancing the site’s minimalist charm.
The animation appears and remains as you scroll to the designated design spot, adding a subtle yet appealing touch that ties to the minimalist concept.
2) EightOne
The website design for EightyOne agency, crafted by Louie Alexander, effortlessly captures the attention of visitors through the innovative use of video and scrolling interactions. A unique feature is the slim video segment placed within the "O" of EightyOne. Initially matching the size of the other letters, this video segment skillfully shifts through various clips from the agency’s advertisements. As visitors scroll, the video player expands, further engaging them and piquing their interest.
3) Attentive Holiday Marketing Reboot
This microsite, created by Attentive, an AI marketing platform, was designed to prepare marketers for their busy holiday season. Drawing on nostalgia for the early internet, the page emulates an operating system from the late '90s. This interactive experience includes mini icon animations reminiscent of that era, demonstrating how attention to the smallest details can significantly enhance the feeling of old memories.
For example, tapping the play music button or engaging with the internet animation contributes to the overall picture. Interestingly, Attentive's design team was able to undertake this project without any support from developers.
4) SVZ
SVZ is a top-tier design and Webflow development agency based in the US.
Its website is a beautifully crafted page filled with fun little treats, showcasing vividly bold shapes throughout. From the moment you enter, you're welcomed by a continuously moving line of animations. As you scroll down, you'll encounter several hover animations, images that appear as you scroll into position, and a quote shape that drops into its place.
5) Une Mini Aventure (A Tiny Adventure)
"Une Mini Aventure" (or "A Tiny Adventure") is a unique story crafted by Nebula, with the webpage built by Pierre-Louis.
It stands out as it offers a fully interactive story about an average boy named "Gus" and his adventures on his way home for lunch. The narrative unfolds through scrolling animations; the more you scroll, the further Gus progresses towards home, revealing more of the story.
This page is a testament to the expansive potential of animations in storytelling, showcasing how they can vividly bring narratives to life (quite literally!). It also widens the scope for those considering how animation can be integrated into gamification strategies, providing inspiration and creative avenues for engaging content.
6) Tone Segurado
Tone Segurado is a portfolio page created by António Segura, a talented 2D and 3D illustrator, animator, and brand & Webflow designer based in Lisbon, Portugal.
Having an online portfolio is a great idea for anyone, especially creatives looking to showcase their talents. António’s portfolio impressively demonstrates his ability to “let your brand stand out from the crowd.” The site is filled with engaging animations that invite you to explore everything you need to know about him. One interesting aspect you might have noticed is how, despite the numerous Lottie animations incorporated within the page, it loads incredibly fast. This efficiency is all thanks to the lightweight nature of Lottie.
PS: Did you notice the little mouse that has been accompanying you as you scroll?
7) Hsu McCullough
Hsu McCullough, an architecture studio in Los Angeles, adds motion to its minimalist modern Webflow website hamburger menu. These microanimations add a bit of movement, bringing the page to life in a subtle yet effective manner.
Another thing to highlight is their animated logo which is a smart way to show your company branding. Learn more about how you can animate your logo or check out the LottieFiles library for more animated typography inspiration.
8) AlphaMiner
AlphaMiner is a Venture Capital that creates, launches, and invests in Web3 consumer companies.
Designed by Lottie Evangelist Diego Toda de Oliveira, the page includes a series of animations that represent the company's approach and building blocks - showcasing how strongly animation works in the storytelling process.
9) Weaymouth Creative
Weaymouth Creative is an independent, full-service design studio based in Toronto
Weaymouth Creative uses animation in an unexpected way, breaking up sentences with animated geometric shapes. This technique leaves a lasting impression without disturbing the reader to their design goal. Their webpage is a mix of color and motion, creatively using Lottie animations to enhance the user experience and communicate in a visually compelling manner.
10) Watchfull Eye Agency
Sneak a peek at Watchfull Eye Agency (W&E) websites.
Designed by Deduxer, the site created for this modern digital marketing agency aims to encapsulate their keen insight and dynamic strategy in a design that not only stands out but also interacts uniquely with visitors. Every scroll and click reinforces Watchfull Eye's vigilant brand identity, thanks to the clever use of animations.
What will you build with Webflow and Lottie?
Even if you're not a designer or developer by trade like the creator of these websites, adding captivating animations to your Webflow site is within reach with LottieFiles.
With LottieFiles for Webflow, you can access thousands of customizable animations for every industry imaginable right within Webflow. Simple pick your favorite, tweak the colors to match your branding and use Webflow's interactive settings for triggers or scroll-based animations, ensuring a seamless integration into your website.
And if you do happen to be a designer or developer, you can broaden your with tons of integrations for your favorite tools like Figma, Adobe After Effects, and Visual Studio Code. Moreover, for those looking to create personalized animations, our web-based animation creation tool, Lottie Creator, provides all the tools and features you need to get started
We're excited to see the incredible websites you'll create using Webflow and Lottie. We hope this showcase has inspired you to create something truly amazing!
Happy creating
