We developed a highly interactive and complex web experience using Webflow, integrating Lottie animations for background dynamics and Webflow interactions for text animations, all crafted in-house to create seamless motion.
Tools used for this project
In a collaborative effort with Shoreditch Design, our agency was tasked with developing a highly interactive and visually complex web experience hosted on Webflow. The project goal was not only to bring the client's visionary design to life but also to ensure that the web experience remained engaging and accessible across all devices.
While scrolling animation
To achieve a dynamic and intricate background animation, our team leveraged Lottie, a powerful tool for adding lightweight, scalable animations to web platforms.
Lottie animations are particularly advantageous for web design due to their small file sizes and the ability to scale across different platforms without losing quality.
The animation was crafted entirely in-house, based on a storyboard provided by Shoreditch Design's creative team.
This storyboard outlined the key scenes, which our animator then meticulously connected and interpolated to create seamless transitions and movements throughout the web experience.
In addition to the background animations, we utilized Webflow's robust interaction capabilities to implement engaging text animations.
These animations were designed to complement the Lottie background, creating a cohesive and immersive user experience that captures and holds the audience's attention.
In adapting the project for mobile devices, we developed a unique Lottie animation tailored for optimal mobile viewing, ensuring visual appeal across all screen sizes.
Acknowledging performance issues with Lottie animations on iOS devices, we ingeniously rendered a video version of the animation.
To mimic the interactive scrolling experience, we implemented custom code that scrubs through the video in sync with the user's scroll, creating a seamless and engaging mobile web experience.
Advance implementation
One of the primary challenges was ensuring that the complex animations did not adversely affect the site's performance or load times.
Through expert optimization and leveraging the efficiency of Lottie animations, we achieved a highly interactive experience with a surprisingly small impact on performance, ensuring that the final product was not only visually impressive but also user-friendly.
The final animation size was only 250kb.
We take on only a select number of Webflow projects every quarter to ensure the highest quality of work. Currently accepting projects for Q4 2024. Book a call to explore how we can collaborate.
Hear what our client have to say about out us, our design skills and as a Webflow agency.
.png)
Chatura Fernando
Product @ Glyhpic
Tom Trafford
Head of Digital Marketing @ Thrive Learning
Madeleine MacDonald
National Disability & Carers Card
.png)
Kelly Liang
Content Marketing @ Gather
Wiebke Holthuis
Head of Marketing @ Scaleup Finance
Maximillian S
Founder @ ChaChing