flackr/scroll-timeline
Scroll Timeline
Scroll-timeline is a JavaScript library and standards-based browser polyfill that implements scroll-driven animations and scroll timelines for environments lacking native platform support. It links web animations and CSS animations directly to the user's scroll position or element visibility instead of time, enabling fluid visual effects tied to page movement.
The library supports scroll-driven page effects such as scaling image dimensions, panning background positions across large visual elements, and revealing transitions between visual states progressively as the user scrolls. It also triggers dynamic element animations whenever an item enters or intersects the visible viewport.
Underlying architectural mechanisms handle document structure changes, schedule animation frame updates with the rendering pipeline, and map container scroll dimensions and bounding rectangles into a normalized timeline progress percentage. Standard style declarations and CSS variables are intercepted to evaluate scroll progress manually and attach calculated values directly to target element keyframe animations.
Features
- Scroll Animations - Links web animations directly to the user's scroll position to create fluid, interactive visual effects tied to page movement.
- Scroll Timeline Polyfills - Implements scroll-driven animations and scroll timelines for web browsers lacking native platform support.
- Scroll Animation Polyfills - Provides a standards-based polyfill that enables CSS animations to be driven by scroll position instead of time.
- Scroll-Based Property Interpolation - Performs mathematical mapping of container scroll dimensions and bounding rectangles into a normalized timeline progress percentage.
- Scroll-Driven Animation Tools - Links element animations directly to the scroll offset so visual progress tracks page movement accurately.
- Scroll-Driven Transition Effects - Scales images, reveals content, and creates panoramic transitions that progress naturally as the user scrolls.
- Dynamic Element Animation - Triggers and controls dynamic animations whenever an item enters or intersects the visible viewport area.
