React Three Fiber tutorial - Scroll Animations

how to create beautiful scroll animations using reactory fiber [Music] hi today we will see how to create scrolling missions using jsfp and 3js as you might have noticed the 3D model compared to my other tutorials looks very good and this is because Thai has prepared it for us hi everyone you can find her Social Links in the description below now let's jump to the tutorial let's start by creating our project using yarn createvit select react JavaScript yarn Dev to run the project okay our react app is created now let's add 3js yarn are the three reactory dry and react free fiber let's do some cleaning change the title of the app to air 3x scrolling animation remove everything into app.css and on root let's make it full screen and add a gradient found on grabion.com let's clean index.css and remove everything go to the app remove everything too let's return a canvas from reactory fiber and inside render a component named experience we create a folder named components and inside create an experience.jsx file let's create our component and return a mesh containing a box geometry and a mesh normal material let's add orbit controls from dry to be able to move the camera go back to the app and import The Experience component pressing Ctrl space now we can see a cube and can rotate the camera around but we have white borders due to the default merging go to index.css and add to body and HTML margin 0 and padding 0. it's not here anymore now let's talk about the 3D model made by ties it contains the three floors that we will animate they are into three separate meshes so we can have easily the control on them I will include both the glb and blender file on the repository if ever you want to modify it the lights and shadows are baked into a texture to have this great result and if you modify the model you will need to rebake it by the way if you think this video is helpful please hit the like button to make it more visible to other developers thank you a lot okay go to public add a folder named models and paste the glb file inside now in the terminal we use npx jltf jsx and our model to generate a react component with the definition of its mesh let's go to the generated file and copy everything create a new filing components we will name office.jsx paste the component rename model to office and fix at the path adding dot slash models to use jltf and preload okay now in our experience we remove our Cube and add our office component we can see our office but it's completely dark to fix it we can simply add an ambient light with an intensity of 1 as the light and shadows are baked into the texture it's already looking perfect now let's move to the scroll effects let's wrap our office component with scroll controls with three page it means we expect to scroll three times the 8th of the screen if we try to scroll it's zooming the camera we can disable the zoom on the orbit controls and now we can see our scroll bar moving on the right to have control over our animation we are using the jsap library let's add a reference to our main group and inside a use layout effect let's create our timeline that we will store into a reference now let's define the timeline animation to Method over the group position we want it to last 2 two seconds and at the end of the two seconds we want the group to be completely down as we are moving the object and not the camera to be completely down as we are moving the object another camera we have to go the opposite way let's declare our floor height and the numbers of floors we have with u scroll we can get the current Scroll of our page and in use frame let's stick our timeline to the current scroll now if we scroll the office is correctly animated let's change the camera filler View and position to get closer by default perfect now let's animate our floors let's wrap the library and Attic in groups and move the position of the mesh to the group it will ease our rotation later now let's wrap our mesh in another group to store a reference of it and declare them into Library ref and attic ref now in our use frame let's animate them using our jsap timeline this time they are already at the final correct position we will use from to animate them to the current position now we can see the attic is going from the up let's animate it on the z-axis too we set 1.5 at the second parameter to trigger the animation only from 1.5 seconds to 2 the duration of our timeline perfect now let's rotate the library on the y-axis we use mat.pi as rotation are using radians perfect let's animate the attic as well now with the same principle let's animate our whole group to make some room for the UI later we also change its default position perfect now let's jump to the UI we start by importing Tailwind following the documentation and import font from Google phones by adding them to the index.css and the Tailwind config now let's create an overlay component to test Tailwind is working add the oval Lane next to the office in the scroll container but we have an error it's because we can't put directly HTML into the canvas we need to wrap it into a scroll element with the HTML props now we can see our text let's create a section component for each page the important class is Edge screen to take the whole 8 of the screen because we Define a three page we Define in three sections the rest is up to your tastes it Scrolls accordingly but the width is too small let's wrap everything into a full screen with div let's add a prop to our section to be able to position the second one on the right perfect now we will animate the opacity with use scroll we get the scroll percentage from 0 to 1. we'll store the opacity of each section with use date and in use frame we will use scroll dot range for a scroll from 0 to 1 into 1 3 of the screen crawl dot curve to go from 0 to 1 to 0 and scroll that range from 2 3 during one third I recommend you to try and read the documentation let's add a prop to our section to pass the opacity we can see that the opacity changes to make our items appear and disappear thanks for watching I hope this video was helpful to you if you have any questions or requests feel free to ask them in the comments or by joining the Wawa Sensei community on Discord if it's not already the case don't forget to hit the Subscribe button and to check the Bell to not miss the upcoming great tutorials see you soon bye bye [Music]

Channel: Wawa Sensei

Views: 16,515

Keywords: webgl, threejs, three js tutorial, threejs tutorial, three js tutorial for beginners, react three fiber, react three fiber tutorial, three js journey, threejs journey review, 3d website, three js react, threejs react portfolio, r3f tutorial, webgl 3d, webgl tutorial, creative coding, three.js, threejs scroll animation, threejs scroll animation tutorial, threejs gsap tutorial, react three fiber course, developer portfolio, three js course

Id: pXpckHDDNYo

Length: 7min 57sec (477 seconds)

Published: Sat Feb 04 2023