Webflow development project

Collective Continuum

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.

webflow development
Lottie Animation
GSAP
custom development
javascript

Tools used for this project

Figma
Webflow
AfterEffects
LottieFiles
Javascript
00:00
00:00

Project Overview

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.

10 - 50 employees
Company size
Venture Capital
Industry
London, UK
Location
Webflow & Lottie Animations
Services

While scrolling animation

Lottie Animations for Dynamic Backgrounds

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.

Lottie animation
After effects
Webflow

Webflow Interactions for Text Animations

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.

Webflow interactions

Mobile Optimisation

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.

javascript
CUSTOM DEVELOPMENT
Lottie

Advance implementation

Optimisation and Performance

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.

Lottie
Performance
Optimisation
Accepting projects for q4 2024

Got a project?
Get in touch.

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.

All done 🎉
Nice one. Thank you!
We will be in touch within 24 hours.
Powered by Formly — A ViDesigns Product! 💪🏽
Oops! Something went wrong while submitting the form.
wall of love

Our Clients love working with us.

Hear what our client have to say about out us, our design skills and as a Webflow agency.

See all reviews
They turned around pages to a very high standard in record time. We were told they were Webflow specialists, and they haven't disappointed at all. From bug fixing to page design to animation, they are 5 stars at it all.

Tom Trafford

Marketing Manager @ Thrive Learning

Precise, fast, communicative, no-fuss, generous, and trustworthy. Never had an issue and have come back to the team time and time again for more and more work. If you use another dev agency, you're just going to pay more for far less. It doesn't get better than this.

Maximillian S

Founder @ ChaChing

Very happy with the team at ViDesigns. They have been very communicative, responsive and available, exceeding our service level agreement, and the work is done to a great standard. I would highly recommend them and look forward to continuing to work together long-term!

Madeleine MacDonald

National Disability & Carers Card

Vimalan and the team at ViDesigns have done an amazing job re-designing Scaleup's website. Couldn't have asked for a better website partner here. Super proactive and very responsive along the way!

Wiebke Holthuis

Head of Marketing @ Scaleup Finance

Vim and the team did an excellent job. They put together exactly what we wanted for our new site and delivered in a quick timeframe. I've worked with many different web development teams in the past and none have done as good a job as ViDesigns. Highly recommend, and will be using them in the future.

RJ Napolitano

Co-Founder & CEO @ Ghost

Vimalan and his team at ViDesigns did a fantastic job bringing our new marketing site to life in Webflow. Couldn't recommend highly enough, great to work with, super responsive and very fairly priced!

Chris Cater

CEO @ Fable Homes