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
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
Lottie animation
After effects
Webflow

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.

Webflow interactions

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.

javascript
CUSTOM DEVELOPMENT
Lottie

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.

Lottie
Performance
Optimisation

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.

Only 2 spots left for q3

Got a project?
Get in touch.

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

Head of Digital Marketing @ Thrive Learning

Incredible team! I have always been disappointed working with agencies, and I was initially skeptical, but Vim and his team are truly exceptional and came through a referral from a fellow founder. Exactly what I was looking for—people who will sit down with us to understand our product, market, customers, and the tone of voice we want to resonate with our users. Their service is the definition of a white-glove service for a bespoke, high-quality website that converts.

Alex Marantelos

CEO @ Intryc

We’re extremely pleased with the work Videsigns delivered on our website. The entire project was managed efficiently and delivered on schedule, with excellent communication throughout. They went above and beyond by implementing several additional features that added real value. Highly professional, responsive, and easy to work with. We wouldn’t hesitate to recommend Videsigns to anyone looking for top-tier web development.

Solomon

Business Director @ The Socialbear Group

Working with Vimalan, Andrew and Luca has been one of the most satisfying agency experiences I’ve ever had. The crew has been responsive and attentive in the way they interacted and creative and reliable in the designs they delivered. They understood our internal timelines well and did everything to help us meet our target dates. This empathy itself is worth hiring them for. I look forward to working with them in future one-off projects, too!

Kelly Liang

Content Marketing @ Gather

I am extremely pleased with the website development services provided by ViDesigns. From start to finish, their team demonstrated exceptional professionalism, speed, and technical expertise. What truly stood out was the seamless collaboration throughout the process. The animations they created have truly elevated the user experience on the site, providing a much clearer understanding of our product, enhancing the user experience in a meaningful way.

Boryana Angelova

Senior Designer @ BVNK

I approached five agencies prior to choosing ViDesigns. With each, I outlined a very tough deliverable—we needed an updated website in 6 weeks. Of the agencies, ViDesigns was the only one that didn't blink. They were very clear that this was doable, but the onus would be on us. We started work. The project moved at a fast pace with constant communication and an iterative process. The team was well organized, pleasant to work with, and talented. In the end, we made the deadline and had a website that achieved our goals. We will work with ViDesigns again. I enthusiastically give them 5 stars.

Matt Besch

Vice President of Marketing - ACCURE