GSAP Infinite Machine

A React app with GSAP scroll-triggered video frame animation.

Setup

1. Install dependencies:

   npm install

2. Install FFmpeg (required for frame extraction):

   • Download from https://ffmpeg.org/download.html
   • Add to your system PATH

3. Extract video frames:

   npm run extract-frames

4. Start development server:

   npm run dev

How it works

The app uses FFmpeg to pre-extract frames from the video as PNG images. These frames are then loaded and scrubbed on scroll using GSAP ScrollTrigger for smooth animation.

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.