Uploaded February 2023 | Updated September 2026, 1 week ago

---

Discover how to load a 3D model and animate it based on the current user scroll.
We will be using React Three Fiber Drei helper useScroll with GSAP to have full control over our animation.
We'll also create an HTML/CSS User Interface using Tailwind that will also follow the scroll of the page.

To follow Thais on social media it's here:
Twitter
twitter.com/thayumiko

Instagram
instagram.com/madeingrae

The text version of this tutorial is available here
dev.to/wawasensei/scroll-animations-with-react-three-fiber-and-gsap-273j


#threejs #react #r3f

▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬

My complete course to learn React Three Fiber
https://lessons.wawasensei.dev/

Final Result
codesandbox.io/p/github/wass08/r3f-scrolling-animation-tutorial/draft/icy-platform?file=%2Fsrc%2FApp.jsx

Source Code
github.com/wass08/r3f-scrolling-animation-tutorial

React Three Fiber Documentation
https://docs.pmnd.rs/react-three-fiber/getting-started/introduction

R3F Drei
github.com/pmndrs/drei

Create your React App With Vite
https://vitejs.dev/guide/

GSAP Documentation
greensock.com/docs/v3/GSAP/gsap.from()

TailwindCSS
tailwindcss.com/docs/installation

If you want to dive deeper into Three.js I highly recommend you to follow Bruno Simon complete tutorial named Three.js Journey.
threejs-journey.com
I also have a discount code just for you to get -20%
https://threejs-journey.xyz/join/wawasensei1

▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬

00:00 - Intro
00:45 - Project Setup
02:17 - 3D Model
02:37 - Animate onScroll
05:55 - Scroll User Interface
07:26 - Conclusion

▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
youtube.com/channel/UCBH-5ctALmmOrm4kczL3urQ/join

▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬

💻 The Discord Community
discord.gg/2wBhwchcWu

📸 Instagram :
instagram.com/wawa.sensei

🎎 Facebook :
facebook.com/wawasenseiyt

🐦Twitter :
twitter.com/wawasensei

🐦TikTok :
tiktok.com/@wawasensei08

💻 My website :
https://www.wawasensei.dev

🎨 The end screen artist (aka My friend) :
instagram.com/noemie_pulido