waleed46shah / project_3dEarth

Inspired from Min Pham's website, This project shows a 3d on-scroll rotating Earth 3d model, and a List with Clipping mask text animation on scroll and also, clip path menu fill animation on hover

Summary

We often see 3d models in website, such as Apple which animate on the basis of scroll. This effect can help dramatically increase UX as it shows complete side of a product or an environment we want to show if used wisely. Here's a small demo which demonstrates Rotating Earth which is animating on scroll. Besides that, smooth scoll is also added and with that, a scroll-based animation is added

Technologies

1. NextJs
2. SASS
3. React Three Fiber
4. Framer Motion
5. Framer Motion 3D
6. Lenis Scroll

Live Demo

https://project-3d-earth.vercel.app/