Vanilla JS • No GSAP

Vanilla Demo

Scroll down to see IntersectionObserver & rAF in action

↓ Scroll

Component 01

Fade Up Reveal

This element fades in and moves up as it enters the viewport. It's triggered by a native Vanilla JS IntersectionObserver.

Component 02

Elements can slide in from the sides. The observer adds an .is-visible class, and CSS transitions handle the smooth movement.

Component 03 / Scroll Scrubbed Marquee

VANILLA JS — REQUEST ANIMATION FRAME — NO PLUGINS — VANILLA JS — REQUEST ANIMATION FRAME —

INTERSECTION OBSERVER — NATIVE PERFORMANCE — CREATIVE CODING — INTERSECTION OBSERVER — NATIVE PERFORMANCE —

Component 04

Triggered once via observer, animated using a custom requestAnimationFrame easing function.

Power Output

RPM Speed

Annihilation

Component 05

Calculating scroll progress manually to scrub through frames.

Frame: 1 / 100