This looks like a Three.js animation, but It’s not. It’s 100% built in Framer, no external librar...This looks like a Three.js animation, but It’s not. It’s 100% built in Framer, no external librar...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Bardia's avatar
Bardia Madani
• Dec 20
This looks like a Three.js animation, but It’s not.
It’s 100% built in Framer, no external libraries, no WebGL, just proper 3D transforms and hierarchy.
Thread below explaining the full setup 👇
Framer
Bardia's avatar
Bardia Madani
• Dec 20
Step 1: Build the hierarchy
Arrange your assets in a circular layout around a center logo.
Structure matters:
Nest all logos (including the center) inside two parent frames
Place all of those inside two parent containers
This setup gives you full control over motion and depth later. Think of it as rigging before animation.
Post image
Bardia's avatar
Bardia Madani
• Dec 20
Step 2: Add depth and movement
Enable Preserve 3D on the parent frames
Apply rotation to create the orbital motion
Use Mirror (not Loop) on the secondary frame
Mirror allows the motion to return smoothly to its origin, creating a natural wobble instead of a hard reset.
Post image
Bardia's avatar
Bardia Madani
• Dec 20
Step 3: Prepare icons to face forward
Before animating anything on the icons themselves:
Enable Preserve 3D on the outer icon frame
Apply a static 3D rotation that reverses the angle of the outer parent container
Post image
Bardia's avatar
Bardia Madani
• Dec 20
Step 4: Keep icons facing forward
Add reverse animations to the icons so they continuously compensate for parent motion.
Result:
Icons always face the camera
Motion feels stable and intentional
The 3D illusion holds from every angle
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started