React Three Fiber tutorial - Scroll Animations

Discover how to load a 3D model and animate it based on the current user scroll.
We will be using React Three Fiber Drei helper useScroll with GSAP to have full control over our animation.
We'll also create an HTML/CSS User Interface using Tailwind that will also follow the scroll of the page.
To follow Thais on social media it's here:
Twitter
/ thayumiko
Instagram
/ madeingrae
The text version of this tutorial is available here
dev.to/wawasensei/scroll-anim...
#threejs #react #r3f
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
My complete course to learn React Three Fiber
lessons.wawasensei.dev/
Final Result
codesandbox.io/p/github/wass0...
Source Code
github.com/wass08/r3f-scrolli...
React Three Fiber Documentation
docs.pmnd.rs/react-three-fibe...
R3F Drei
github.com/pmndrs/drei
Create your React App With Vite
vitejs.dev/guide/
GSAP Documentation
greensock.com/docs/v3/GSAP/gs...)
TailwindCSS
tailwindcss.com/docs/installa...
If you want to dive deeper into Three.js I highly recommend you to follow Bruno Simon complete tutorial named Three.js Journey.
threejs-journey.com/
I also have a discount code just for you to get -20%
threejs-journey.xyz/join/wawa...
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
00:45 - Project Setup
02:17 - 3D Model
02:37 - Animate onScroll
05:55 - Scroll User Interface
07:26 - Conclusion
▬▬▬▬▬▬ 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
🎨 The end screen artist (aka My friend) :
/ noemie_pulido

[@RUFeelin]

Fanatstic tut, thanks so much. I look forward to learning a lot from you as I recently embarked on my threejs journey.

[@WawaSensei]

Welcome aboard! Let's learn a lot together 🙌

[@Ganesh-vu1mn]

Excellent! Calm explanation

[@WawaSensei]

Thanks Ganesh! 🙌

[@ashishboora3049]

You are the one i was searching for from last 4 years

[@WawaSensei]

😍 Ow, it's never too late!

[@ashishboora3049]

@@WawaSensei Absolutely, better fashionably late than never! Huge Thanks for the free content! You are an incredible tutor, you have clarity in everything🙌

[@ooogabooga5111]

Thank You for think quick tutorial. I love this fast paced teaching methord.

[@WawaSensei]

Thank you so much 🙌 I'm very happy to have good reviews on this kind of approach, it confirms I'll continue doing it that way (while improving it over time 😊)

[@bravefastrabbit770]

Do Not use seek(), it essentially jumps to a specific point in the timeline without affecting whether or not the instance is paused or reversed, which is bound to cause bugs when scrolling rapidly. Instead use timeLine.current.progress(scroll.offset); (inside the useFrame). It may not be a problem in basic scenarios where all you do is interpolate various uniforms from A -> B. But when it comes to more 'complex' animations that require queueing of essential callback functions that i.e manipulate VBOs, the seek() method will fail you.

[@WawaSensei]

Thanks for sharing it! Will give it a try and switch to it if it's good 🙌

[@ol1175]

Thank you so much!

[@WawaSensei]

Glad it helped! You're welcome!

[@user-me9ik4vi1f]

It's really amazing! Good job

[@WawaSensei]

Thank you so much! 🙌 Don't hesitate if there is specific topics you'd like me to cover

[@4rexdadi195]

Pls more of videos like this. God bless you for free contents 🙏🏻

[@WawaSensei]

Thank you so much, this definitely motivates me to do more videos of this kind 🙌

[@vidhantthapa2919]

Thank you so much buddy !! Love from India .

[@WawaSensei]

Thank you! Love to India 😍

[@rsalinaszambrano]

Thank you so much for this!

[@WawaSensei]

You're welcome! 🙌 Thank you!

[@JorgeSantamariaRamos]

Great video! Thank you so much for sharing :)

[@WawaSensei]

Ow, thanks a lot for your comment! I spent a long time to prepare it, it means a lot to me 🙏

[@apflexin223]

Very helpful, thank you!

[@WawaSensei]

Glad it was helpful! Thank you very much 🙌

[@nicolettifps]

I'm a beginner in programming and passionate about webgl, I looked for months for a course or something that would teach me how to do the basics and this was the only one I got. It was direct, from beginning to end, without skipping parts, complete, simple, fast, without too much frills. Do more, with the same affection as this one, thank you

[@WawaSensei]

I'm very happy to read it, that's exactly the type of content I try to create! From this video, I kept this format of cut and voice over instead of live coding to give the maximum to the viewer in the minimum amount of time Thank you very much for taking the time to write it, and of course I'm continuing and also trying to create better and better content 🙌

[@anonymous_ken8834]

Fantastic! But please, how can I hide the scrollbar display?

[@muhiddin_kabraliev]

You have uploaded a video. I am very interested in Japan and the textbook is also perfect thanks

[@WawaSensei]

Thank you! 🙌

[@caml4752]

All your videos about r3f are interesting. We also thank you very much for producing these videos. However, wouldn't the setState used to change the 'opacity' attribute at the end of this video be a problem? I think I saw the official document saying that using setState inside useFrame has a performance impact and should be avoided. The other way I thought of it is to use useRef instead of useState. (instead, to many rendering) ==== ex. some component internal code const p1Ref = useRef(null); const scroll = useScroll(); useFrame(() => { if (!p1Ref.current) return; p1Ref.current.style.opacity = scroll.curve(1 / 3, 1 / 3).toString(); });

[@WawaSensei]

Thank you! Yes you're right about the setState in a useFrame, there's another comment about it. Here it doesn't cause a lot of problems because it only re-render the HTML (but still it causes a lot of avoidable re-renders)

[@Pmarmagne]

Merci Wawa!!! La commande a 2:51 viens de me changer la vie!!!!! Encore Mille Merci!

[@WawaSensei]

Avec plaisir!!! 😍

[@jyby1]

Hey! Ker Lee Yap sent me over here and this was a great tutorial! I have some questions about how you time your Three.js animations and the scroll of html elements so that they fit together. I tried to do this with a portfolio site that I was working on but I found that making the scroll animations work when the screen size changes to be rather difficult.

[@WawaSensei]

Hey thank you! Don't hesitate to join us on discord to discuss about it (with screenshots and how you're trying to achieve it) You should find the link in the description

[@emalorenzo2415]

Thanks for the tutorial :) setting state inside useFrame could hurt drastically performance, maybe could be better to handle the opacity with another timeline.progress?

[@WawaSensei]

Thank you! Yes, you are right! Set state in useFrame is only ok when it's true/false and not "fast changing" values, I don't remember what kind of value it is in this tutorial, but another timeline might help here!

[@helenaenrose]

merci bcp! bcp apprecié ❤

[@WawaSensei]

Han merci à toi 🙌

[@emilo6008]

Hey, great video! I have a question: will the scroll animation work on mobile too or do I need to code specific mobile touch events? Thank you!

[@WawaSensei]

Thank you very much! Yes it will, you can remove OrbitControls to avoid that it intercepts the touch events to move the camera instead of scrolling the scene. Let me know in the Discord if you struggle doing it 🙌

[@gabrielagalvis4775]

Me alegra mucho haber encontrado este canal, explica mucho en poco tiempo ❤ una duda, ¿Se puede realizar sin usar vite, solo con react?

[@WawaSensei]

Hola, thank you! Sorry will reply in English, you can use React without Vite yes, for example "Create React App" is ok -> docs.pmnd.rs/react-three-fiber/getting-started/installation

[@gabrielagalvis4775]

@@WawaSensei ¡Muchas Gracias!

[@nicolasportu]

Outstanding! How about a book 3D

[@khevlar3421]

I really like this. I would be glad if you could create a video covering the light baking process in blender. Thanks a ton.

[@WawaSensei]

Hey, noted! You're not the first one to request it so I will make it very soon 🙏 Thank a lot 🙌

[@shedsoncode]

@@WawaSensei please do🙏

[@ventaidepc]

hello very good job, but i dont know where find icons or process in ex: ...( where find icons) please thanks

[@WawaSensei]

Hello thank you, actually I used emojis, your computer has them by default (support.airship.com/hc/en-us/articles/360039248612-Using-Emoji-from-your-Windows-or-Mac-computer)

[@user-em8oh5nh8n]

Hi, is there a way to apply scroll snapping to the text sections? Thank you.

[@WawaSensei]

Hi, Depending on the effect using simple CSS snapping could work (but not working very well with useScroll from drei) Or you also can use ScrollTrigger from gsap greensock.com/docs/v3/Plugins/ScrollTrigger

[@piyushtiwari4453]

Hey , I have a question if i want to integrate html content into threejs scene and have interactivity with xr library , how can i do that , please make a tutorial on that

[@WawaSensei]

Hey, it’s in my plan to make xr tutorials In the meantime you can check github.com/pmndrs/react-xr

[@AlfMeodel]

Merci beaucoup pour ce super tuto 🙂 cependant ScrollControls ne semble pas fonctionner en version mobile, uniquement à la souris 😲 aurais-tu une solution, ou est ce qu'un de tes excellents tutoriels règle ce gros, gros, gros problème ?

[@WawaSensei]

Hey, je t'ai répondu sur le Discord 😊 Tu dois avoir un OrbitControls qui rentre en conflit, le désactiver va régler ton soucis

[@AlfMeodel]

@@WawaSensei Mais ouii !!! 😀Magnifique ça fonctionne ! ( je me complique la vie bien comme il faut depuis 2 jours pour trouver une solution 😅) merci beaucoup pour tes super Tutos !!

[@revansarbast5478]

what node version did you use because it doesn't work for me

[@WawaSensei]

Good question! Join the Discord and show your error! (You can use nvm to easily switch between versions to try github.com/nvm-sh/nvm)

[@voldemortvi4264]

let me tell you few things , the way how you put things make it sound so simple , i have just start learning react and my goal is to build a 3d Portfolio website to put my projects in & i have a good feeling your channel it's gonna help me to achieve that ! I value and respect your Content ! THANK YOU

[@WawaSensei]

Wow, I'm so happy to read such comments, that's my goal while I create content 🙌 I really wish you a great Threejs/R3F journey! Thanks to you 🙏

[@zenbauhaus1345]

lets see that portfolio!

[@user-ov5yi7tf4x]

why the glf file I export from blender only have 800kb could you please make a viedo that talk about export

[@WawaSensei]

I think I will cover a dedicated video about it at some point. If you compress or don't include the texture, the filesize will be reduced

[@PradeepSelva204]

I really wonder how Gsap and ScrollTrigger works will work as the Scroll and Scroll Controls works as a components rather than a page itself. It will be gr8t if you show us a tutorial on this

[@WawaSensei]

Hey, I found this codesandbox.io/s/886nm, it seems pretty easy to connect it with R3F. A great option if you need more options than ScrollControls!

[@otfnk]

Did you find any solution for this?

[@merivaari3836]

Can you a simple video where we can use gsap to apply animation on cube.... it's too complex for beginners...

[@WawaSensei]

I cover basic things in my course (this lesson particularly lessons.wawasensei.dev/courses/react-three-fiber/lessons/animations)

[@kevinbatdorf]

Don't see Thaís' social links in the description just fyi

[@WawaSensei]

Oh my... kill me! It's corrected, thanks a lot for noticing it and telling me 🙌

[@TOPONE441]

i have this error:#"yarn" is not recognized as the name of a cmdlet, function, script file, or executable program. Check the spelling of the name, as well as the presence and correctness of the path, and then try again.# what should i do?:)

[@WawaSensei]

did you install yarn?

[@vixen5861]

where did u find the gradient

[@WawaSensei]

www.grabient.com/

[@neffexnfx4080]

Pls!! Upload Blender bake texture tutorial video. Maybe how to set up blender nodes in this video

[@WawaSensei]

Hi, I will try to prepare a tutorial on how to do it, thank you very much for the request 🙌

[@rocramos6091]

Ah oui t'as basculé full développeur créatif maintenant ? Je te connaissais youtubeur français spécialisé sur Vue JS. En tout cas j'espère que ça se passe bien pour toi au Japon

[@WawaSensei]

Hello, j'espère que tu vas bien ! En tout cas sur KZbin yes je suis passé full développement 3D, tu t'y intéresses également ? Ca se passe au top merci, t'y as déjà été/compte y aller ?

[@rocramos6091]

@@WawaSensei Honnêtement on m'a dit il y a pas mal d'opportunités pour les ingé et ou dev au Japon. Parce qu'apparemment les Japonais ne seraient pas aussi fort que cela en programmation. Mais honnêtement ça me fait peur quand j'entends parler du mythe du salaryman 15h00 par jour au travail. Mais bon ça ne reste que des propos recueillis à droite et à gauche à travers le visionnage de reportages sur le Japon. Il se pourrait que la réalité soit différente ou plus nuancée. En tout cas ravi que ton expatriation au Japon se passe à merveille

[@WawaSensei]

​@@rocramos6091oups pour la réponse tardive ! Les devs sont moins concernés par les conditions de travail Japonaises. Il y a pleins de boites étrangères implantées ou en IT elles sont globalement plus modernes. J'ai pas mal d'amis devs et ils ont de bonnes conditions de travail. Merci beaucoup !

[@rocramos6091]

@@WawaSensei Super si les conditions de travail en IT sont aux antipodes de ce que j'ai entendu. Ravi que ça se passe à merveille pour toi. Merci pour ta réponse, c'est sympa d'y avoir pensé 😊😊

[@ilmanmanarulqori5632]

Awesome🎉 Another usecase scroll trigger please

[@WawaSensei]

Thank you, Noted! Do you have more specifications on what you'd like to achieve?

[@ilmanmanarulqori5632]

@@WawaSensei i dont, but i like content that implementing about design website in awwwards using stack react, GSAP, framer motion etc. Good job bro, keep going 🤟🏼

[@TeeFoles]

@@WawaSensei I would also love this! I'm trying to make a personal website where sections/objects fly in as you scroll. But as they are all separate components the .to() scroll animations happen concurrently rather than in sequence. I am trying to figure out how I can use scroll triggers to fix this atm

[@georgiosburnham]

Hi once again friend, it is really fantastic, and I can I model in 3d, I have some interesting ideas for architectural visualization.

[@WawaSensei]

Hi again, thanks a lot! Is it an invitation for a partnership for the next tutorial?!

[@georgiosburnham]

@@WawaSensei why not, we could do something together, we keep in touch and then generate an idea, I create an optimized 3d model scenario based on an idea and we put it on the web and make it web responsive.

[@WawaSensei]

Sure could be fun, don't hesitate if you have ideas 💡 Will do the same ☺️

[@harizfauzil7672]

hi wawa sensei can u make 3d portofolio with three js tutorial

[@WawaSensei]

Hi, yes sure! React Three Fiber is ok or only Three.js vanillajs? By the way you can find my portfolio source code available here github.com/wass08/portfolio-2021

[@harizfauzil7672]

@@WawaSensei react three fiber its okey dont worry thx answer my request

[@ahmedmh8595]

kindly can i download your videos to watch it offline ?

[@WawaSensei]

Hey of course, is it by default available on KZbin? Or you can use online tools like youtube2mp4

[@ahmedmh8595]

@@WawaSensei thank you very very much sir

[@ahmedmh8595]

@@WawaSensei we Will be So Happy If You Make an online course include projects like this

[@WawaSensei]

@@ahmedmh8595 I plan to do it in the future weeks/months 🙌

[@harizfauzil7672]

can u share 3d model file ?

[@WawaSensei]

Hello, It is in the git repository in public/models (you can find the link in the description)

[@jamesvelopmenthagood8998]

does this not work on mobile?

[@WawaSensei]

Thank you for noticing it! You can simply remove the line (or make it conditional if you still want it on desktop)

[@jamesvelopmenthagood8998]

@Wawa Sensei yeah I took a couple of examples and set them up locally, and it worked fine on mobile after that.

[@serychristianrenaud]

thank

[@WawaSensei]

Thanks to you 🙏

[@ooogabooga5111]

Why did we had to use two groups here 4:54

[@ooogabooga5111]

why do we need another group for the ref

[@WawaSensei]

Hi! Ok so the mesh has already its correct position which is [-1.97, 4.23, -2.2] By wrapping it to another group, I can use simple values based on [0, 0, 0] as the origin position of this subgroup, it's way easier to do it that calculating based on the [-1.97, 4.23, -2.2] position. Especially if ever you want to update it later.

[@ooogabooga5111]

​@@WawaSensei Thank You So Much For Replying . I understand what you meat but my Question was why do I need this, .... closing and why can't I do

[@WawaSensei]

Well that's what I explained.. if you do it, in your gasp timeline settings you'll have to use -1.97, 4.23, -2.2 values to move.. so to avoid having to do calculation, using a 0,0,0 group instead is way easier

[@ooogabooga5111]

@@WawaSensei yeah I completed your tutorial, now I get what you ment. I googled and grasped every bit of your code since every library was new to me. Thank you again.

[@TOPONE441]

kzbin.info/www/bejne/qp3Pi4p5hr9slZI i just follow instructions in this video and stuck in 55 min, 3d model does not appearing

[@WawaSensei]

Hey, consider joining the discord with more details about your issue (lessons.wawasensei.dev/discord)

[@contactpbs2058]

Please make response also

[@WawaSensei]

Response to what?

[@contactpbs2058]

@@WawaSensei sorry make design responsive to mobile screen

[@WawaSensei]

Ah yes good idea I'll make a short video for it!

[@MIlyas-hv7ic]

Toooo Fast, please make them a bit slow and explain in between.

[@WawaSensei]

Hey, the format as changed a lot since then. You should prefer it now

[@imBaptiste]

Tellement dommage d'aller aussi vite sérieusement.. le rendu est génial mais c'est une horreur à suivre tellement ça va vite.. constamment entrain de faire des pauses, des retours arrières pour voir ce que tu fais et être sur de n'avoir rien loupé.. tu peux pas appeler ça un tutoriel là ahah, ça pourrait être une preview d'un tuto tellement que c'est rapide, vraiment dommage..

[@WawaSensei]

Hello, c'est un ancien tutoriel, le format a beaucoup évolué pour pallier à ça

[@user-ei5hb9ce4n]

you have to speak and play this video more slower , i can't follow

[@WawaSensei]

Video format changed since this video, but you can try the x0.5 maybe?

[@Venkatesh-vm4ll]

Hi sir, I send a message in twitter, please do reply

[@WawaSensei]

Hi! Thanks for your message, I replied 🙏

[@Venkatesh-vm4ll]

@@WawaSensei 👍

[@harizfauzil7672]

hi wawa please reply to my chat on direct message

[@WawaSensei]

Hi done, the easiest way is to join the discord to be honest 🙌

[@harizfauzil7672]

@@WawaSensei where is link discord

[@WawaSensei]

In the description 🙏