CODEWITHSUNDEEP
javascriptanimationsvgraphaelsnap.svg
user2793755
user2793755

Reputation: 141

Snap SVG animation

Hi All I'm trying to figure out how to code an animation using Snap SVG.

I know there are plenty of ways to achieve what I'm looking for which is really just a simple animation but am not sure what I am doing wrong.

So I have a couple of SVG files that I want to animate on a click event but I have tried several times to do this but nothing is animating.

Currently this is what I have:

<script>
  var paper= Snap(5000,5000);
  var c = paper.image("clock machine.svg", 100,100,500,480);
  var b = paper.image("new years ball.svg", 306,20,200,200);
  var l = paper.image("lights.svg",306,20,200,200);
  var p = paper.image("button.svg", 158,508,35,35);
  var s = paper.image("LCD screen mask.svg", 265,454,263,85);
  var g = s.group(b,l);
  var clickFunc = function ()  {
    g.transform ('');
    g.animate({transform : "t0,200" }, 2000, mina.backin );
  }
  g.click( clickFunc );
</script>

The images load and appear to work but I cannot get them to animate properly. Ultimately, I'm looking to animate the group of var B and var L when a user clicks var p.

If anybody is familiar with snap svg or raphael js and knows how to animate using those perhaps you can help me out? Any help is much appreciated.

Upvotes: 0

Views: 1794

Answers (1)

user3424445
user3424445

Reputation: 19

In order to animate SVG in SNAP you should append it using a code similar to 

Snap.load("image.svg", function (f) {
  g = f.select("g");
  s.append(g);
});

I found this code on http://www.developerdrive.com/2014/01/introducing-snap-svg/

Upvotes: 1

Related Questions