Search code examples
javascriptanimationscrolltimeline

Javascript Scrollable/Scrubbable Animation w/ svg.js

I would like to create an interface where I can scroll or scrub through the frames of an animation that was created using svg.js (http://www.svgjs.com/). Is there any way I can create this, maybe using a web app framework like Angular JS?

E.g there is a div with the animation and a timeline below in which I could scroll and move through the animation.

Solution

  • You can scrub through animations with svg.js:

    http://documentup.com/wout/svg.js#animating-elements/controlling-animations-externally

    Here is a quick example:

    // Create svg.js canvas
var draw = SVG('canvas')

// Create circle
var circle = draw.circle(100).move(100, 10).fill('#fff').animate('=', SVG.easing.backOut).move(200,200)

// Create image
var image = draw.image('http://distilleryimage11.s3.amazonaws.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg', 100, 100).move(10, 100).animate('=', SVG.easing.elastic).y(300)

// Use mouse movement to animate elements
document.onmousemove = function(event) {
  circle.to(event.clientX / 1000)
  image.to(event.clientY / 1000)
}

    (load both svg.js and the svg.easing.js plugin to make it work)

    You can see it in action here:

    http://jsfiddle.net/wout/BqqNs/

    Roll your mouse over the pink canvas to see the result.