Build a 3D Float Effect using Three.js, Framer Motion, Next.js

Опубликовано: 20 Март 2025
на канале: Olivier Larose

8,692

315

A web animation tutorial that showcases how to create a 3D float effect using Three.js inside a Next.js application. The float is made with React Three Drei and Framer Motion.

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

00:29 Project structure
01:15 Creating the 3D models
01:55 Importing 3D models
04:54 Adding an environment
07:30 Adding basic floating
08:08 Making a custom float
14:53 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