Build a 3D Animated Cube using Three.js, Next.js and Framer Motion
Olivier Larose Olivier Larose
22K subscribers
12,934 views
0

 Published On Sep 14, 2023

A web animation featuring a 3D cube, animated on scroll, mouse move and on drag, using Three.js, react three fiber, Next.js and Framer Motion.

Demo / Source code: https://blog.olivierlarose.com/tutori...

00:00 Intro
00:24 Cube Geometry
4:55 Cube Texture
7:07 Drag Gesture
8:20 Mouse Move Gesture
12:38 Scroll Gesture
15:18 Scroll Gesture with Framer Motion
18:47 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_  
Discord Channel:   / discord  

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #svg #morph

show more

Share/Embed