Animation frame by frame controlled by scrolling down.

Hello,

I'm trying to get some traditionnal animation effect from scrolling down the viewport, which is already done at this URL: http://www.briancanovas.fr/skrollr-animation.html

BUT...

As shown on my exemple, I embedded 1 file (SVG) two times. The first, with OBJECT, is the SVG file in its entirely. I used the same with a DIV id="animation" but with a background-image property called from the CSS linked within the HTML.

What I want is that Skrollr plays the animation (controlled by scrolling down the viewport) BUT without interpolating each step, because I want that it feels like a cartoon. It means: no interpolation AND go from a state to another, any number of time as needed.

In the second case (with the SVG embedded from the DIV id="animation") everything works pretty well, the animation is controlled by the scroll except that I had to duplicate my last keyframe (data-1600xxx) and add it to the very end of my animation so the last step is shown properly.

If I omit the duplicated [end], the last frame of my character (with the eyes opened) isn't displayed properly, as in this exemple: http://www.briancanovas.fr/skrollr-animation2.html

Why am I not able to close my animation with only a last couple of Begin/End? And by the way, is there any solution to do the same effect but with the use of the OBJECT embedded SVG instead of using a DIV?

Thx for your ideas, anyway! :D

Prinzhorn / skrollr

Animation frame by frame controlled by scrolling down. #243