Three Scrollify

Declarative scroll-triggered animations for Three.js — like CSS, but for 3D.

See It In Action

Step 1: Define Scroll Sections

Give any HTML section an id — when it scrolls into view, animations trigger.

Step 2: Write Stylesheet

Map section IDs to mesh names. Define position, rotation, scale, or custom material changes.

Step 3: Connect & Go

Pass your meshes and stylesheet to createScrollSheet(). That’s it.

Zero Dependencies* Anime.js Powered IntersectionObserver

*except animejs and three

Ready to Animate?

Use this in your next scroll-driven portfolio, product showcase, or interactive storytelling project.

View on GitHub