Discover the best webflowthreejs websites created by professional designers. Get inspired and start planning your perfect webflowthreejs web design today!

ThreeJS Bubble Animation from Codepen.io Converted to Webflow.

Clone it and enjoy!

Reference link: https://codepen.io/supah/pen/BqwJxq

ThreeJS Bubble Animation from Codepen

ThreeJS Bubble Animation Webflow Cloneable

This clonable was created to make life easier for those who want to use 3D in their WebFlow projects but don't have time to learn Threejs in depth.

It uses a library called "Webgi" by Pixotronics, which makes the result very realistic with just a few steps. Everything you need to know to adapt this page and change the 3D model is shown in this video: https://youtube.com/watch?v=mpTZbJPYZas.

- 3D background using Webgi + GSAP ScrollTrigger
- All other interactions done natively with Webflow
- Smooth scroll using Lenis (https://lenis.studiofreight.com)

Done by Anderson Mancini (https://twitter.com/Andersonmancini) and Diego Toda de Oliveira (https://twitter.com/dieg0liv).

Check Webgi documentation here: https://webgi.xyz/

Feel free to clone, adapt, make it yours!

JIOTTO WEBGI WEBFLOW

Jiotto - Webgi and Three.js + Scrolltrigger

ametsmsek

Ametsmsek - Portfolio Website

The Favorite Design

Demonstration of Three.js Glass Materials in Webflow

Three.js Glass Objects

glass-objects-three-js-in-webflow

Shout out to the team @Finsweet for releasing the initial cloneable. I've been using webflow for years but never really cared much to use the Showcase.

But, this project has opened up a new avenue for designers to push the limits of what we can build and I'm ready to contribute.

This will be the first of probably hundreds of complete & incomplete Web3 Cloneables released on this profile.

I look forward to other developers to creating similar cloneables to see where we can really take this bad boy!

Flagship Web3.JS Wallet Connect

Refokus

Arqitel is the evolution of real estate investing, using data science to select better cities, neighborhoods, and properties for long-term outperformance. 

Real-estate investment firm websites are boring? Not this one. 

With this new website, we created a continuous 3D (created with WebGL and animated with GSAP) animation to walk the user through a transition between their approach, and how migration data translates into investing in the right cities and neighborhoods, and ending with data driven building management. All in an engaging single page website that is a joy to interact with.

Arqitel

Raluca Mitarca

A simple interactive webGL website done for a local bike repair shop.

Ambulanta moto website showcase

Ambulanta Moto repair shop website

Spline is a great way to make an interactive 3D background. We added a custom loading animation with a background image of our design to make the loading feel smoother.

Spline 3D Cloneable

spline-cloneable

This a 3D immersive landing page to showcase MakeReign's academy initiative aiming to accelerate the careers of UI/UX graduates.

MakeReign Graduate Program

MakeReign Graduate Programme

This is a virtual art gallery that we created to showcase some of our recent websites.

It was built with WebGL and then embedded in Webflow to allow frontend modifications. 😎

TFD Gallery Threejs Portfolio

tfd-threejs-portfolio

Random exploration with React three fiber, and gsap. nothing too crazy.