Skip to content

nadjascodejourney/scrollr3fproject

Repository files navigation

Animated Scroll Website with React Three Fiber and GSAP

This project is a simple interactive 3D web application build for selfstudy purposes. My goal is to use 3D web technologies in combination with scroll-based animations to offer an immersive user experience. Click the link in the description, to see it live!

Project Overview

The application utilizes the following technologies:

  • Vite & React: For fast development and optimized build management.
  • react-three/fiber: Integration of Three.js with React for a reactive 3D rendering environment.
  • react-three/drei: Extension of react-three/fiber with useful helper components (i.e.: , )
  • Three.js: WebGL based library for 3D graphics on the web.
  • CSS & Tailwind CSS: For styling and layout.
  • GSAP: For animations.

Features

  • Scroll-Based Animations: Interactive 3D animations controlled by scrolling
  • Including particles with a custom calculated Positions Array and 3D-Objects with scroll-based movements
  • Overlay outside of the Canvas to display HTML in front of the Canvas
  • Responsive Camera Behavior: The camera dynamically responds to mouse movements and scrolling (i.e. parallax effect)
  • It works responsive on different sizes

Learning Resources:

  • React Three Fiber Documentation - Pmndrs.docs
  • Three.js-journey by Bruno Simon
  • Wawa Sensei