Scroll-Animated Image-Based Movies

Last week I had an interesting request that was fun to figure out. The GIS folks had put together a series of images forming an animation, as one zooms in on the California coast. Inspired by parallax image effects, they wanted to know if the image animation could be tied to scrolling the page, so the animation plays a frame at a time as you scroll.

We found a few existing toolkits that did this such as ScrollMagic, but found that the animation was not at all smooth, and that it didn't work so well for some of the cases the web designers specifically had in mind. A few of them didn't work on mobile at all.

So I ended up creating my own, and came up with two prototypes you may find interesting.

Scroll-Animated Header

This first prototype, has a top-and-center banner image on the page as with a lot of sites. But the page content locks to the height of your screen and forces scrolling, and the banner animates as you scroll.

https://github.com/GreenInfo-Network/ScrollAnimatedHeader

The effect is pretty neat, right?

This one was meant as a proof of concept and a demonstration of a technique, and not a redistributable library. Still, if you're interested you can View Source above or hit up the repo: https://greeninfo-network.github.io/ScrollAnimatedHeader/

jquery.Reanimator

Turns out that what the web folks really wanted, was for multiple, smaller image-animations to be sprinkled and embedded throughout the page content. The same way you'd normally add some float:right and float:left images throughout your text, they wanted image-animations.

So here's a look at a new jQuery plugin I created: jQuery.Reanimator.

https://greeninfo-network.github.io/jQuery.Reanimator/

 Unlike the previous one, this is specially designed to work with multiple such animations, and to not make assumptions about the page flow (e.g. no fixed header and no fixed scrolling zone). And it's implemented as a jQuery plugin, so it's almost copy-paste easy to apply to any one or any several such animations.

jQuery.Reanimator sports some neat features as well.

• Animations can have mousemove and click effects, to play their animations. This provides alternate ways of triggering the animation should scrolling be insufficient.
• Ability to add padding to the top and bottom of the scrollable area for an image.
• These options can be set in the constructor, and also in data-reanimator-XXX attributes to override that global setting. Makes it easy to customize individual animations.
• A "debug mode" to show the scrollable areas, etc. to give insight into testing and tuning the animation for your website.

For more info and to download it for your site, hit up the repo:

https://github.com/GreenInfo-Network/jQuery.Reanimator