skrollr
A small JavaScript library that animates page elements as you scroll, configured with plain CSS-style data att
- Stars
- 18.4k
- Forks
- 3.4k
- Licence
- MIT
- Language
- HTML
- Last update
- 8.8 years ago
- Type
- Library
This repository is archived and no longer maintained.
What it is
skrollr is a stand-alone JavaScript library that changes CSS properties of HTML elements based on how far the page has been scrolled. You mark keyframes on an element with data attributes written in CSS syntax, and the library interpolates between them, for example to fade a background color or rotate an element as the reader scrolls. It is designed to work on desktop and on mobile browsers without jQuery.
- Change an element's background color from one shade to another as the user scrolls 500 pixels down
- Rotate or move an element with CSS transforms tied to scroll position
- Apply non-linear easing to individual CSS properties using square-bracket syntax
- Define keyframes in a separate stylesheet with the skrollr-stylesheets plugin
Great for
- Designers who want scroll-linked animation without writing much JavaScript
- Developers maintaining an existing site that already uses skrollr
- Small landing pages or storytelling pages with a few animated elements
Not ideal for
- Production sites that need guaranteed behavior on new mobile browsers, because the README says the project is no longer actively developed and problems with new browser versions are likely
- Teams that prefer defining animations in JavaScript; the README points to ScrollMagic for that approach, which depends on jQuery and GSAP
- Projects that need ongoing maintenance or new features, since the repository is archived and last received a push in January 2018
How to get it
- 1
See the README
Clone the repository
git clone https://github.com/Prinzhorn/skrollr.git - 2
Run it
- Include skrollr.min.js near the bottom of your HTML page, before the closing body tag
- Call skrollr.init() in a script tag after the script
- Add data-0 and data-500 attributes with CSS properties to an element
- Open the page and scroll to see the interpolation
- 3
Get the most out of it
- Use the forceHeight option if you do not want skrollr to make the page scroll at least 500 pixels
- Use rgb or hsl colors and choose the color space deliberately, since the README says they produce different animations
- Add easing functions in square brackets after a property, such as transform[bounce], or define custom ones with the easings option
- Use data-top keyframes to make animations relative to the element's position in the viewport
- Review the examples folder in the repository for working patterns
Downloads
Strengths
- Keyframes sit next to the elements they animate, in plain CSS syntax
- Works on both desktop and mobile, using a native scrollbar on desktop
- Has official plugins for hash navigation, IE support fixes, and external stylesheets
Trade-offs
- Archived, with no active development since about September 2014 according to the README
- The README warns that mobile support has historically been difficult and advises against compromising user experience for scroll effects
- Colors must be written as rgb or hsl rather than hex, which is a small but real learning curve
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| skrollr (this) | 18.4k | Library | beginner | 8.8 years ago | Designers who want scroll-linked animation without writing much JavaScript |
| ScrollMagic | 15k | Library | intermediate | 7 days ago | Web developers adding scroll-triggered effects such as class toggles or lazy loading |
| aos | 28k | Library | beginner | 2.6 years ago | Front-end developers adding simple scroll reveal effects to a marketing or landing page |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.