4 more spots left for q4
20+ verified reviews
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
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.
Got a project?
Oops! Something went wrong while submitting the form.
.svg)
"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."
Matt Besch
Vice President of Marketing
Accure
"The design work was sharp, the copy was spot on, and it all came together in a way that felt right for our brand. They laid out a clear process from the start, which made the whole project easy to trust."
Mathias Lindrum Schmidt
Content Lead
Understory
"ViDesigns feels part of the Thrive team and their budget is safely ringfenced as we can see the performance they have helped us to unlock that we just wouldn't have had with a standard agency model."
Tom Trafford
Head of Digital Marketing
Thrive Learning
"ViDesigns have been really, really good. It has been great working with the team; we enjoyed the process as well, and everyone’s loving the new website so far."
Tobi Banjoko
Digital Marketing Manager
Everseen
"Having a dedicated specialist for each discipline made an enormous difference; that depth of expertise is genuinely difficult to replicate in-house. The team quickly became an extension of ours."
Kendel Ruppert
Marketing Lead
"We liked their proactive approach to communication and especially how fast and efficiently they responded to change requests."
Rhidian Jones
Head of Marketing
"Wanted to say a HUGE THANK YOU to all of you for your hard work on this. We couldn't be happier with the site, and we couldn't be happier with the site, and I'm sure it'll be a huge boost for Datashake this year! You guys rock!"
Philip Kallberg
Founder
Datashake
"Their service is the definition of a white-glove service for a bespoke, high-quality website that converts."
Alex Marantelos
CEO
Intryc AI
"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