/R3F-ScrollControls-Tutorial-With-Gsap

How to animate your 3d model on scroll using gsap

Primary LanguageJavaScript

React Three Fiber ScrollControls GSAP Tutorial(React Three Fiber ScrollControls with Gsap tutorial)

React Three Fiber/Three.js Tutorial for Beginners | Awwwards Style Website | Gsap, ScrollControls

This is repositry contains the files that we created in my youtube tutorial here: https://www.youtube.com/watch?v=52sTNIJs78A

Getting Started with this project

  • Download the repository,
  • Unzip it,
  • Rename the folder to be what you want your project to be called
  • Open the folder in your VS Code
  • Open a new integrated terminal within the folder
  • Run 'npm i' to install the node modules
  • Run npm start once the modules have installed

Notes

This is a basic project to get you up and running. Here are some suggestions on how you can improve:

  • Add custom fonts
  • Make responsive
  • Add better shadows (play around with lighting and element positions, what can cast/receive shadows etc...)
  • Make the canvas background change colour on scroll
  • Make multi page using Routers (play with animating things in and out)