SVG Animation
with Snap.svg

Julia Smith
2015 Knight-Mozilla Fellow
@julia67

Why SVG?

Resolution independence

Lightweight

= 1KB

A transparent PNG of the same size would be ~8KB.

Style

Please don't mistake this as a recommendation for gradient fills.

Interaction

Don't do this either.

Accessibility

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="49.248px" height="49.247px" viewBox="0 0 49.248 49.247" enable-background="new 0 0 49.248 49.247" xml:space="preserve">
   <title>Twitter icon</title>
<path fill="#6D6E71" d="M24.624,0C11.024,0,0,11.024,0,24.625c0,13.6,11.024,24.622,24.624,24.622s24.624-11.022,24.624-24.622
  C49.248,11.024,38.223,0,24.624,0z M38.071,18.491c0.012,0.275,0.019,0.552,0.019,0.83c0,8.486-6.459,18.271-18.271,18.271
  c-3.626,0-7.002-1.062-9.844-2.885c0.502,0.061,1.013,0.09,1.532,0.09c3.009,0,5.777-1.025,7.976-2.748
  c-2.81-0.053-5.182-1.908-5.999-4.459c0.392,0.074,0.794,0.112,1.208,0.112c0.586,0,1.153-0.075,1.692-0.225
  c-2.938-0.588-5.151-3.184-5.151-6.295c0-0.029,0-0.057,0-0.082c0.866,0.48,1.856,0.771,2.909,0.803
  c-1.723-1.151-2.857-3.116-2.857-5.344c0-1.178,0.317-2.281,0.869-3.229c3.167,3.885,7.899,6.44,13.236,6.709
  c-0.109-0.472-0.166-0.962-0.166-1.464c0-3.547,2.875-6.422,6.422-6.422c1.847,0,3.515,0.779,4.687,2.027
  c1.463-0.287,2.837-0.822,4.078-1.557c-0.479,1.498-1.498,2.758-2.823,3.551c1.299-0.154,2.536-0.498,3.688-1.01
  C40.414,16.454,39.325,17.584,38.071,18.491z"/>
</svg>

Why animate?

It's about time.

change of state over 1 second

play

no transition

linear transition

bounce transition

Why Snap.svg?

Demos: snapsvg.io/demos/

Snippet: Create an element

function createSquare(){
  var none = Snap('#snippet-1 svg');

  var rect1 = none.rect(0, 0, 200, 200);
  rect1.attr({
    fill: '#00a99d'
  });
}

createSquare();

Snippet: Attach event

function createSquare(){
  var none = Snap('#snippet-2 svg');
  var rect1 = none.rect(0, 0, 200, 200);
  
  rect1.attr({
    fill: '#00a99d'
  });

  rect1.click(function(){
    this.attr({
      fill: '#222'
    })
  })
}

createSquare();

Snippet: Animate event

function createSquare(){
  var none = Snap('#snippet-3 svg');
  var rect1 = none.rect(0, 0, 200, 200);
  
  rect1.attr({
    fill: '#00a99d'
  });

  rect1.click(function(){
    this.animate({
      fill: '#222'
    }, 1000, mina.linear)
  })
}

createSquare();

Snippet: Existing SVGs and fancy fills

var twitterSVG = Snap('#snippet-4 svg');
var twitter = twitterSVG.select('path');
var gradient = twitterSVG.gradient("l(0, 0, 1, 1)#ccaddb-#00a99d-#addbc1");

twitter.attr({
  fill: gradient
});

twitterSVG.attr({
  width: 300,
  height: 300,
  cx: 75,
  cy: 75
});

Snippet: Transforms

twitter.hover(function(){
  animIn();
}, function(){
  animOut();
});

function animIn() {
  twitter.animate({
    transform: 'r360, 24.625, 24.625'
  },750, mina.easeInOut)
};

function animOut() {
  twitter.animate({
    transform: 'r0, 24.625, 24.625'
  },750, mina.easeInOut)
};

Resources