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 🔗

Our main inspiration for the final portfolio

#threejs #r3f #blender

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

My complete course to learn React Three Fiber

Final source code

Framer motion

Framer motion 3D

GSAP

Tailwind

React Three Fiber documentation

R3F 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:

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community

📸 Instagram :

🎎 Facebook :

🐦Twitter :

🐦TikTok :

💻 My website :

[genshian]

Thank you for this. I like that you cover the fact that you go through how you get things from documentation and going in depth of your process. So many creators don't go through that and it limits how we grow in niche stacks. This is great. Thanks loads!

[gomo]

Bro been years that i have been researching how to build something quite similar but, never got enough materials/tutorials on which technologies to use and how to best combine them, I have been dwelling into many of those individually(framer, three/fiber, blender/ue5) and have never even imagine I could combine them and use them like this....this is literaly jaw dropping experience for me. Love you so much.

[slempens]

I loved the Framer Motion parts! Thank you so much

[chokdeesam]

T'es actif, et tu fais du super boulot ! Merci :)

[tarunsukhu]

Most of my r3f learning is credited to you @WavaSensei. This is not just a portfolio tutorial but a master class for scrolling, animation, r3f and more. Thank you and look forward the finale

[thebenezer]

Nice tutorial Wawa Sensei!❤👏

Sharing this video to a friend who needs this!

[deathdefier]

Thank you sensei, once again you are a hero ❤

[NicoDaDude]

Hello Wawa,

Thank you very much for the great video.
I am still struggling with a general question:

In your video you can't see the second scrollbar of ScrollControls.

Currently the problem is that I first have to go into the "canvas frame" with the mouse for the scroll event to trigger.

How do you manage to include the scrollbar from the browser outside of the ScrollControls smoothly?

[soufyan]

it couldnt find the the "materials"for me so the office background doesn't show up how do i fix this?

[serial_coder]

Great tutorial. You should explain things in short so that beginner can understand. It will help you to grow subscribers. Thank you.

[bloodylupin]

hola, thanks for the precious content. I have a question: is the purpose of gsap only snapping the first section scroll? Is it worth to install gsap only for that?

[kevinvenegascordova]

Hello, sorry for a question why when I place my blender models sometimes they don't appear and I have to keep changing the positions, did you do the export wrong or what is it?

[pulkitmathur]

how can we add a background music in the portfolio to make it more interactive?

[sevva]

Hi everyone i am stuck at this error "TypeError: Cannot read properties of undefined (reading 'length')" . Does anyone have a solution for it.

[studentuniversity]

where can I can get those flags for language skills? how to add them in array? So magic!

[KMALAX]

How are you accessing data.scroll? The useScroll hook doesn’t have it.

[ejoojoo]

I think the @react-three/drei useScroll API have changed.
Edit: Change data.scroll.current to data.offset.
And instead of using gsap just use "scrollTo". In useFrame after "onSectionChange" add "data.el.scrollTo(0, sectionNumber * data.el.clientHeight)"