Animated Webflow Website

Stas Mishin

Web Developer

Webflow Developer

GSAP

three.js

Webflow

Web Development

Animated Webflow Website for a B2B company.

I received a static design in Figma, along with animation references from my design partners.
The fully responsive, pixel-perfect website was built in four weeks, followed by one week of debugging.

Website features

Current time display. The current time is displayed in HH:MM:SS format in the GMT+0 timezone.
Current time
3D Particle Sphere. A stunning 3D sphere composed of 30,000 shimmering particles, with increased distribution at the poles. The sphere moves toward the user on scroll, creating an immersive depth effect.
3D sphere
Step-by-Step Animation: Animated circles illustrating a step-by-step card progression synced with progression bar.
Circles animation
Shaking particles and moving waves

Challenges

Performance Issues on Older Machines. Some animations were jumpy because certain frames were skipped by the browser. Solution: Debugged animations using Chrome Developer Tools, identified performance bottlenecks, and optimized animation code.
Heavy Use of Animation Libraries. Multiple libraries increased load times before the site was fully rendered. Solution: Implemented asynchronous and lazy loading for libraries to improve performance.
Large Number of Assets Slowing Down Loading Speed. Solution: Compressed assets, saved static images in .WebP format, and enabled lazy loading for assets on scroll.
Grid Gallery Responsiveness: Converting the grid gallery into a slider for smaller screens. Solution: Used JavaScript to initialize the slider gallery dynamically based on viewport width.

Technologies used

Webflow
Three.js
GSAP (animation library)
Slick.js
Check out the live website.
Like this project
2

Posted Mar 1, 2025

The website features a rich variety of animations: from subtle micro-interactions to immersive 3D effects.

Likes

2

Views

11

Tags

Web Developer

Webflow Developer

GSAP

three.js

Webflow

Web Development