A web animation tutorial on how to make a 3D earth rotate on scroll, with a clip path animation using Three.js, Framer Motion and Next.js. Inspired by https://minhpham.design/

Join the Creative Menu Challenge:   / discord  
Demo / Source code: https://blog.olivierlarose.com/tutori...

00:00 Intro
00:32 Earth Component
00:51 Earth Texture
1:20 Rotate on Scroll
1:59 Lazy Loading
2:08 Text Clip on Scroll
2:55 Text Clip on Hover
3:35 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_  
Discord Channel:   / discord  

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #svg #morph