Wawa Sensei logo
Back to videos

Build a 3D Portfolio with React Three Fiber - Framer Motion Scroll Animations

Time to build the HTML interface and add scroll animations with framer-motion on our 3D portfolio

Welcome to the third part of the 3D portfolio tutorial with Three JS and React Three Fiber in the style of David Heckhoff.

In this third chapter, we will:

  • create an html interface with Tailwind

  • install Tailwind autocompletion extension

  • add 2D and 3D scroll animations with framer-motion

  • add scroll smooth transition with useScroll and gsap

  • add a menu and animate the camera when it's open/close

Get the starter pack here šŸ”—

https://github.com/wass08/r3f-vite-starter

Our main inspiration for the final portfolio

https://david-hckh.com/

#threejs #r3f #blender

Resources

Final source code

https://github.com/wass08/r3f-portfolio-scroll-animations

Framer motion

https://www.framer.com/motion/introduction/

Framer motion 3D

https://www.framer.com/motion/three-introduction/

GSAP

https://greensock.com/gsap/

Tailwind

https://tailwindcss.com/docs/

React Three Fiber documentation

https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

R3F Drei

https://github.com/pmndrs/drei

Need help with this tutorial? Join our Discord community!