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-st...
Our main inspiration for the final portfolio
https://david-hckh.com/
#threejs #r3f #blender
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/
Final source code
https://github.com/wass08/r3f-portfol...
Framer motion
https://www.framer.com/motion/introdu...
Framer motion 3D
https://www.framer.com/motion/three-i...
GSAP
https://greensock.com/gsap/
Tailwind
https://tailwindcss.com/docs/
React Three Fiber documentation
https://docs.pmnd.rs/react-three-fibe...
R3F Drei
https://github.com/pmndrs/drei
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
01:02 - Tailwind installation
02:35 - HTML/CSS UI
09:07 - Framer motion 2D animations
14:06 - Framer motion variants
16:22 - Scroll to section
23:14 - Menu
27:06 - Loading office & avatar
29:38 - Animate 3D elements
32:26 - Scroll along 3D
32:46 - Scale items animation
36:01 - Texture color fade animation
38:05 - Wobble/Distort materials
41:13 - Camera animation
44:48 - Custom cursor
47:07 - Final result
47:37 - Join Wawa Sensei memberships!
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
https://www.wawasensei.dev
Watch video Build a 3D Portfolio with React Three Fiber - Framer Motion Scroll Animations online without registration, duration hours minute second in high quality. This video was added by user Wawa Sensei 09 June 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 63,610 once and liked it 1.7 thousand people.