Skip to content

README.md

Latest commit

 

History

History
56 lines (41 loc) · 1.35 KB

README.md

File metadata and controls

56 lines (41 loc) · 1.35 KB

Anime.js Scroll Clone

Greenfield Vite/React implementation of the Anime.js homepage-style scroll animation. The page uses Anime.js 4.4.1 for DOM motion and draggable interaction, Three.js for the fixed WebGL stage, and GLB module assets copied into public/models.

Run

npm install
npm run dev

Open the local URL Vite prints, usually:

http://127.0.0.1:5173/

Build

npm run build

What Is Implemented

  • Full top-to-bottom scroll narrative with dark and light chapters.
  • Fixed Three.js stage that loads the Anime.js module GLB assets.
  • Intro, toolbox, feature, modules, and finish sections.
  • Live feature demos for animation, timeline composition, scroll sync, staggering, SVG drawing, and draggable controls.
  • Right-side chapter rail with progress, jump ticks, and a draggable scroll thumb.
  • Responsive desktop and mobile layouts.

Project Structure

.
├── index.html
├── package.json
├── public/
│   └── models/
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   └── styles.css
└── vite.config.js

Verification

The implementation was checked with:

npm run build

It was also loaded locally in Chrome at desktop and mobile viewports to confirm the scroll sections, WebGL canvas, and responsive layout render without console errors.