Skrollr Introduction

With Skrollr we can animate elements on our page as we scroll the browser window.

Timeline & Keyframes

Animations use a timeline to represent elapsed time. For this project, our timeline is the vertical scrolling bar in the browser. Scrolling down the page represents passing frames in the timeline. Individual frames are actually measured by the vertical height in pixels of our browser window.

For example:

A value of 1000 would represent our web page when we have scrolled exactly 1000 pixels down the page
A value of 0 would represent the page state when we have scrolled 0 pixels, otherwise known as the top of the page.

Visual representation of our animation timeline

We can represent the timeline visually using a table. The table below shows the state every 100 pixels scrolled, up to 1500 pixels.

Animated Object	CSS Property	Timeline (represented in number of pixels scrolled down the page)
Animated Object	CSS Property	0	100	200	300	400	500	600	700	800	900	1000	1100	1200	1300	1400	1500

Animations use what are known as keyframes. A keyframe is a snapshot of an element at a specific point in the animation timeline. The animation is created by smoothly transitioning the state of the element between the two keyframes.

Skrollr will calculate all of the animation for us using the keyframes we supply it with. Skrollr can automatically transition the values between many CSS properties. All we have to do is supply it with at least two keyframes for each CSS property we want to animate on an HTML element.

Fade Out Example

To animate the opacity of an element, we would provide two keyframes for the CSS opacity property:

The first keyframe tells us when in the timeline the animation should start and also what the initial opacity will be.
The second keyframe tells us when in the timeline it should end and also what opacity will be when the animation is finished.

We could represent this in a table like this (animating a circle):

Animated Object	CSS Property	Timeline (represented in number of pixels scrolled down the page)
Animated Object	CSS Property	0	100	200	300	400	500	600	700	800	900	1000	1100	1200	1300	1400	1500
circle	opacity			1								0

In the first keyframe we want the circle to be fully opaque at 200px in our timeline and be fully transparent by 1000px.

See example

HTML5 Data Attributes

HTML5 introduced a new group of attributes that can be added to any element. These are used to store extra information about an element in a semantically valid way. This extra information could be anything and it is most often used in conjunction with JavaScript. The information is stored inside the attribute in HTML and is usually programmatically manipulated using JavaScript.

Data attributes will not change anything on the page by themselves. They must be manipulated with some sort of programming language to have any effect.

Data Attributes follow this format:

Attribute Name:: The attribute name must be prefixed with 'data-'. The rest of the name can be anything you want, but is usually related to the type of data you want to store.
Attribute Value:: The value contains any custom data you want to associate with the element.

Data Attribute Example

Below is an example of a list of produce. Each type of produce in the list has a primary growing season. We could use a custom data attribute to store this information. We could then use JavaScript to manipulate that information. For example, we could show only the Fall produce by hiding all of the other produce list items. Here is what the HTML might look like.

<ul id="produce">
  <li data-season="fall">Apples</li>
  <li data-season="spring fall">Corn</li>
  <li data-season="winter">Winter Squash</li>
  <li data-season="spring summer">Basil</li>
  <li data-season="summer">Carrots</li>
</ul>

Data Attributes and Skrollr

Keyframes in skrollr are represented with HTML data attributes. The data attribute names that skrollr uses represent the timeline, or vertical pixels scrolled on the page.

data-0 represents the state at the very top of the page.
data-1000 represents the state when scrolled down 1000 pixels.
data-5555 represents the state when scrolled down 5555 pixels.

Each data attribute key/value pair represents a single keyframe. To animate an element on your page, you must supply at least two keyframes.

The data attribute value contains a list of one or more CSS property and value pairs. Skrollr will attempt to animate each of the CSS properties you list in the attribute value.

In our previous example we showed a table representing a circle changing from fully opaque to transparent between 200 and 1000 pixels scrolled. Here's how we would write those two keyframes as data attributes for skrollr.

<div class="circle" data-200="opacity: 1;" data-1000="opacity: 0;"></div>

See example

Back to Skrollr Notes »