Here, we used Skrollr to create very subtle animated effects. But do take a look at the power of Skrollr. With very straightforward html syntax to signify key frames, you can create your scrolling animations. A lot of possibilities here, but I do like the idea of those very subtle effects, think moving backgrounds, css color changes, zoom levels, I’m thinking the Ken Burns effect in html5.
Website: Vibrant Design
Take a look at some of the examples on Skrollr…
Get on it at Git and check out the code and examples
Animating SVG Paths! Very cool.
And the syntax is intuitive. Take a look at the documentation https://github.com/Prinzhorn/skrollr#documentation
The key frames are defined as absolute values describing how much the document has been scrolled down. The syntax is data-[offset]-[anchor], where offset can be any integer (0 is default) and anchor can be either start (default) or end. Either offset or anchor can be omitted in some situations. Here are some examples of key frames and their meaning. data-0 = data-start = data-0-start: When the scroll top is 0. data-100 = data-100-start: When the scroll top is 100. data--100 = data--100-start: When the scroll top is -100 (sounds like nonsense, but keep in mind that interpolation will be relative to this point). data-end = data-0-end: When offset is 0, but counting from the bottom of the document instead of from the top. In short: when you reach the bottom of the page. data-100-end: 100px before we reach the bottom. data--100-end: 100px after we reach the bottom (again, it's up to you whether you need it).