Build a Smooth Scroll 3D Earth using Three.js, Framer Motion and Next.js

what is up guys welcome back today I want to show you how I remade a super nice animation from Min Farm's website he actually won an awards side of the day so it's a good opportunity of taking the approach of classical Arts by remaking the work of a master I use 3GS firm emotion and nextges to remake this animation and I'll go step by step and show you my thought process and the techniques I used to come to that result and by the way guys some Discord members and I came up with a creative menu challenge if that interests you come join us we can all learn and push each other's so the first thing I did was to create a next Jazz application using the app router I created a Nerf component and initialized a 3Gs canvas with a sphere and an ambient light honestly the sphere kind of looked like it came from Minecraft so I made it smooth by changing the number of height segments and width segments using the args props and after that it was time to work on the texture I scavenge the internet to find the best Earth texture once on Photoshop put it in black and white and I adjusted the contrast but it still wasn't that good looking so I overlaid a cloud texture with a low opacity and other than normal and occlusion maps for the continents only which gives a nice sense of sharpness when in relation with the soft clouds and also just like in photography lighting is key so I tried multiple positions for the directional lights and I found something decent and then I wanted to rotate the Earth on scroll so for that I used frame of motion and the use scroll hook with an offset covering the full canvas and since the rotation values are in radians I directly used the progress of the scroll which is a value between 0 and 1 as the rotation y value for the sphere but doing it that way makes the rotation directly linked with the scroll which is not smooth so to make it look a bit more professional I could have smoothed out the progress of the scroll using the U spring Hook from firm motion that would have been one way of doing it but I eventually just created a smooth scroll component that wraps the whole page and initialized a lennis scroll making both the animation and the scrolling smooth and finally I knew all those textures would be heavy to download for the browsers so I added a next Dynamic import where I render a screenshot of the Earth as a placeholder while the Earth component is loading and after that it was time to work on the unscrolled clip animation of the titles I started by rendering the titles based on an array of objects I added the U scroll Hook from firm motion and used that progress inside a used transform hook to create a clip progress but that value cannot directly be used as a clip path style since it's an object and not a number so I had to integrate that object inside a used motion template to effectively use it as a style with that I had the clip animation but I wasn't satisfied with it so I created a variation between the different clip animations I added a speed value to the array of objects and then I used it to modify the offset of the use scroll hook effectively changing the speed of the animation and then I added a copy of the titles and put it in position absolute to create a shadow effect and finally I had the last animation to do which is the hover animation I also used the array of projects to render the titles and the descriptions I added a position absolute on the container to Overlay the titles on top of the existing ones and I also added a crop function to shorten the titles that were too long and then I needed to find a way to animate a component when hovering another component so I created a state in the parent to track which project is hovered putting the setter inside the titles component I could then use the selected project value inside the description component to conditionally render a clip path styling and then I added a simple CSS transition and it worked perfectly and with that I completed the animation I hope you learned something I learned a lot doing it I hope you did too if you did leave a like subscribe and I'll see you in the next one bye

Channel: Olivier Larose

Views: 10,179

Keywords:

Id: OpadDVCep_w

Length: 3min 44sec (224 seconds)

Published: Fri Sep 08 2023