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 🔗
github.com/wass08/r3f-vite-st...
Our main inspiration for the final portfolio
david-hckh.com/
#threejs #r3f #blender
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
Final source code
github.com/wass08/r3f-portfol...
Framer motion
www.framer.com/motion/introdu...
Framer motion 3D
www.framer.com/motion/three-i...
GSAP
greensock.com/gsap/
Tailwind
tailwindcss.com/docs/
React Three Fiber documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
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 :
www.wawasensei.dev

[@slempens]

I loved the Framer Motion parts! Thank you so much

[@WawaSensei]

Thank you buddy! This library is very nice 🙌

[@thebenezer]

Nice tutorial Wawa Sensei!❤👏 Sharing this video to a friend who needs this!

[@WawaSensei]

You're the best! Thank you very much 🙌

[@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!

[@WawaSensei]

Yes I really don't want to learn people to just "copy" me, I want you to be able to be able to know how to reproduce and learn by yourself 🙌 Thank you very much for your comment 🙏

[@chokdeesam2365]

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

[@WawaSensei]

Merci beaucoup !

[@gomo5628]

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.

[@christianespinoza4450]

Amazing. Thank you so much.

[@WawaSensei]

You're very welcome! 🙏

[@deathdefier45]

Thank you sensei, once again you are a hero ❤

[@WawaSensei]

Thank youuuu ❤️

[@Venkatesh-vm4ll]

Thank you sir, amazing 🤩

[@WawaSensei]

Most welcome 😊 Thanks for being here every time! It keeps me motivated 🔥

[@tarunsukhu2614]

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

[@WawaSensei]

Wow, thanks a lot for sharing! I'm really glad to help you in you r3f learning journey! 😍

[@Andrew-Tsegaye]

Thank you so much ❤🎉❤

[@WawaSensei]

Thank you mate 🙏

[@WawaSensei]

See you next week for the next part 🔥

[@Andrew-Tsegaye]

Is it the last and most probably the video where we see the complete portfolio website 🤔?

[@WawaSensei]

Should be... BUT if it takes too long to have the results I have in mind there might be another one 🤭

[@Andrew-Tsegaye]

@@WawaSensei It would perfect 🥰 if there's only 4 parts, I really appreciate not to have more than 4 parts! Once again, thank you for your effort and enthusiasm 🙏 😊

[@udemisol2304]

Well done mate. Good to follow you up on this.

[@syntralis]

Great content.

[@WawaSensei]

Thank you very much 🙏

[@aminea-s6542]

Perfect merci bcp

[@WawaSensei]

Avec plaisir 😍

[@igorstashok6294]

you are best bro !)

[@WawaSensei]

Owwww, thank you bro 😍

[@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?

[@WawaSensei]

Thank youuu! Hum.. I don't remember the exact code of this project, but clearly, I think it can be avoided, especially since we already use framer motion 😊

[@GnanSai3DArtist]

Thank you

[@WawaSensei]

You're welcome! 🙌

[@rubancharles8998]

Great Value

[@WawaSensei]

Thank youu

[@serial_coder]

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

[@WawaSensei]

Hi thank you for your kind comment! Can you explain more in depth what you mean by "explain things in short"?

[@serychristianrenaud]

thank

[@WawaSensei]

thank you more!

[@soufyan1118]

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

[@aydogdy4103]

❤‍🔥❤‍🔥❤‍🔥❤‍🔥

[@WawaSensei]

🤗🤗🤗

[@kevinvenegascordova7256]

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?

[@WawaSensei]

Hey, please join the Discord and share some footage to see what issue you face (maybe I have the solution, I found an issue with the animation orientation based on threejs version you use)

[@studentuniversity165]

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

[@WawaSensei]

I used Emojis! You have them by default on Windows/OSX but there are online listing too 👉 emojipedia.org/flags

[@studentuniversity165]

@@WawaSensei Thanks. Brilliant. 🥰🇦🇺

[@heathers.bailey7207]

I need I need 😍 lol

[@WawaSensei]

🤭 glad you like it!

[@pulkitmathur9379]

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

[@WawaSensei]

Hey, you can learn how to do it from this tutorial 🙏 (and add a loading screen at the same time ☺️) kzbin.info/www/bejne/gmKVqHysqr-Hhbs

[@pulkitmathur9379]

Helpful once again

[@WawaSensei]

😍 Thank you! I love your Dab emoji haha!

[@KMALAX1]

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

[@WawaSensei]

Hey, check your import, both framer-motion and drei have useScroll hook

[@KMALAX1]

Even when I clone your repo, the scroll effect only works for the first page.

[@WawaSensei]

@@KMALAX1 I copied this effect from david-hckh.com/ he's only adding this snap scroll effect only between the first and second section. If you want it to happen for every section you can change the conditions in the scrollManager useFrame function

[@kinglycodes]

I have also a problem with accessing data.scroll. I import useScroll from 'react-three/drei' In the component const data = useScroll() the strange thing: when i log 'data' I can see there is 'scroll' in the browser console, but when I try 'data.scroll' to access it, it's not available and I get an error Would be glad, if someone knows a solution to this problem

[@WawaSensei]

@@kinglycodes hey, join the discord and share your code we will be able to help you

[@sevva7587]

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

[@WawaSensei]

Hi, there's a whole post for common error on the Discord (link in desc)

[@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)"

[@don_matthew_]

Hey bro. Please are you going to face errors while building it because of the API?

[@WawaSensei]

Thanks for helping the community 🙌

[@ejoojoo]

@@WawaSensei i will make a PR later