Build a 3D Portfolio with React Three Fiber - Framer Motion Scroll Animations
Need help while watching this video? Join our Discord community .
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
#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
Tailwind
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction
R3F Drei