Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Animate CSS properties on scroll with Skrollr.js

Ed Opare-Aryee, front-end dev at SOON_ offers a beginner-level look at the Skrollr.js plugin

Ed Opare-Aryee, front-end dev at SOON_ offers a beginner-level look at the Skrollr.js plugin


1. What is Skrollr?

Skrollr.js by Alexander Prinzhorn ( is essentially a JavaScript animation library used widely for parallax scrolling. Most simply, it allows the CSS properties of any page element to be manipulated depending on the position of the horizontal scrollbar. By defining keyframes at certain top-scroll offsets within the element attributes themselves, you can initiate desired effects.

2. Add the skrollr library

To begin, within your HTML page add the Skrollr JavaScript file at the end of your <body> block as shown. This will add the Skrollr animation library to your site by telling the document to load the file from a CDN server. Below this, we call skrollr.init() to initalise the library. Adding your JavaScript at the bottom in this way allows your CSS and HTML elements to load first and will prevent an issue called Flash Of Unstyled Content or FOUC from occurring.

<title>Scrolling Animation Example</title>    </head>    
<p>My first paragraph</p>    
<script src=" " skrollr/0.6.30/skrollr.min.js"></script>    
<script type="text/javascript">
var s = skrollr.init();    

3. Animation starting states

Add the starting state of your animation by selecting the keyframe you would like your animation to begin. By setting the element’s CSS opacity value at 0 using the ‘data-bottom-top’ attribute, the CSS properties specified in the attribute will be added to the element at the point of the keyframe. For example, in this instance the element will start by being invisible when it is just below the browser’s viewport.

<p data-bottom-top="opacity: 0">
My first paragraph    

4. Animation ending state

Add animation end states by choosing the keyframe where you would like the animation to end and adding the CSS properties to be applied to the element at that keyframe. In this case using the ‘data-center’ attribute and specifying the element’s opacity as 1, the invisible element will become visible when it’s in the middle of the browser viewport. Skrollr will transition between CSS property values, so when the element is halfway between the bottom and centre of the screen its opacity will be 0.5:

<p data-center="opacity: 1" data-    bottom-top="opacity: 0">    
My first paragraph    

5. Specify the easing function

When specifying CSS properties in the keyframe attributes you can also specify an easing function the animation should use to transition between values. We do this inside the keyframes by adding the name of the easing function after the property within square brackets. In this instance we can see the “swing” easing function stipulated like so:

<p data-center="opacity[swing]: 1"     data-bottom-top="opacity[swing]: 0">
My first paragraph    

6. Add more keyframes

Multiple keyframes can then be added to elements to create more complex animations during scroll. The following will make the element appear and disappear repeatedly as the element moves up or down the page. Check Skrollr’s full documentation on GitHub ( for more options, along with the accompanying project files.

<p data-top="opacity: 0"    
data-100-top="opacity: 1"    
data-200-top="opacity: 0"
data-300-top="opacity: 1"
data-400-top="opacity: 0"    
data-500-top="opacity: 1"    
data-600-top="opacity: 0"    
data-700-top="opacity: 1">    
My first paragraph