Search code examples
javascriptbonsaijs

How Can I Animate my SVG files with a JS Library - Is Bonsai Ideal for this?

I would like to find and learn a js library that will allow me to animate SVG files that I've created in Illustrator. I have a large background in After Effects and motion graphics, so I'm looking for a JS library that will give me a lot of animation functionality.

I'm checking out BonsaiJS right now, and I'm wondering if someone could advise me as to whether or not Bondsai will allow me to animate SVG files, and if so, show me how to get started doing this.

Right now, I have SVGs embedded in image tags throughout my site. I've quickly wrote some sample code to illustrate my thinking on how to go about animating my SVGs with Bonsai. But, are there any special requirements for dealing with existing SVG files rather than shapes? Sorry for sounding vague the SVG format and JS animation libraries are new to me. Simply pointing me towards a tutorial for animating SVGs with a js library would be a tremendous help. 

<img src="graphic.svg" id="graphic">

bonsai.run(document.getElementById('graphic'), {
code: function() {

},

});
Solution

  • Bonsai exposes API for both, embedding images and animating them.

    bonsai.run(document.body, {
  width: 300,
  height: 300,
  code: function() {
    // url that points to the image
    var url = 'https://upload.wikimedia.org/wikipedia/commons/7/72/Variable_Resistor.svg';
    new Bitmap(url).on('load', function() {
      // adjust size
      this.attr('width', 200);
      // add it to the stage
      this.addTo(stage);
      // animate arbitrary attributes
      this.animate('3s', {
        x: 200
      });
    });
  }
});

    I would suggest playing around with your assets and Bonsai's Animation API on http://orbit.bonsaijs.org for getting used to it.