Build a Smooth Scroll 3D Earth using Three.js, Framer Motion and Next.js
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
Watch video Build a Smooth Scroll 3D Earth using Three.js, Framer Motion and Next.js online without registration, duration hours minute second in high quality. This video was added by user Olivier Larose 08 September 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 16,77 once and liked it 70 people.