How to jQuery Animate Part I: ScrollMe.js

Lately I’ve been building various sites and templates, and have sort of gone off on an animation tangent.

When you explore a webpage, you typically encounter animations in the form of text bounces, fade-ins, zoom-ins from the sides, etc. These are great for creating an interactive UI, and I will go into these in detail in parts II & III. But right now, I would like to take a short look at ScrollMe.js.

ScrollMe.js is a jQuery plugin that lets you animate page elements based on the user’s scroll events. What makes it different is that its very simple to implement, and continues to respond as the user scrolls up and down (or left and right) on the page.

An excellent example, and where I first saw this plugin in action, is on Ethereum.org, which is a Blockchain Application (ie-think Bitcoin). The site sports neat little animations as you scroll down the page.

So, I decided to build a few of my own.

Using ScrollMe.js

ScrollMe.js proved to be very simple to use. After importing the plugin, everything is down directly within the HTML. A typical entry would look like this:

Essentially you just define the css elements to alter as the element (in this case an image) enters (data-from) and exits (data-to) the viewport. Besides just fine tuning the CSS a little, its a fairly simple plugin to use.

Some ScrollMe Animations

One could, for example, make a cartoon rocket fly through the sky…

Or perhaps a beaker that turns green and explodes…

…how about a series of animations over parallax backgrounds? (not responsive yet! Sorry if you are on a small screen. Looks great on my desktop!)

You get the idea. Fairly easy to implement and execute.

For more web development fun, you can find me on medium and codepen. All code used in this post can be found on my github.

The best way to predict your future is to create it.