prinzhorn/skrollr

Skrollr is a JavaScript library for creating scroll-based animations on both desktop browsers and mobile devices (including Android and iOS). It works without any other JavaScript libraries and requires no JavaScript skills to use for basic animations, you define your animations directly in HTML using standard data attributes and plain CSS syntax. The core idea is that you attach keyframes to HTML elements by adding data attributes that correspond to scroll positions. As the user scrolls the page, skrollr interpolates between the CSS values you define at each keyframe. For example, you could specify that a background color should transition from blue to red over the first 500 pixels of scrolling, or that an element should rotate as it leaves the viewport. Non-linear easing functions can be applied on a per-property basis. The library handles cross-browser CSS prefixes automatically and supports both absolute keyframe positions (measured in pixels from the top of the page) and relative positions (measured relative to where an element sits in the viewport). Several official and third-party plugins extend its functionality, including hash-based navigation and keyframes defined in separate CSS files. The readme notes the project has not been actively developed since around September 2014, and the author cautions against using it in production, particularly because mobile browser support has always been difficult and newer browser versions may introduce compatibility issues.