This is some sample code for a presentation on Snap.svg. It's just a snippet, not a functional example!

Example.coffee

anims = []

class Slide
  constructor: (@snap, @play, @reset, @animatables = []) ->
    @snap = Snap.select @snap

  addImage: (path, etc...) ->
    e = @snap.image retinizePath(path), etc...
    @animatables.push e
    return e

  stopAnimations: ->
    for e in @animatables
      e.stop()

  isAnimating: ->
    for e in @animatables
      if e.inAnim().length isnt 0
        return true

# Slide 1
anims.push do ->
  TWEEN = 450
  slide = new Slide "#anim_1"
  laptop = slide.addImage("/images/sl1/laptop.png", 0, 0, 600, 400)
  lauren = slide.addImage("/images/sl1/lauren.png", 0, 0, 600, 400)
  CX = laptop.getBBox().cx
  CY = laptop.getBBox().cy

  slide.reset = ->
    slide.stopAnimations()
    laptop.transform laptop.transform().localMatrix.scale(0.2, 0.2, CX, CY)
    lauren.attr "opacity", 1
    lauren.transform("t0,0s1")
  slide.reset()

  slide.play = ->
    if slide.isAnimating()
      return
    laptop.attr "opacity", 1
    laptop.animate
      transform: laptop.transform().localMatrix.scale(1, 1, CX, CY)
    , TWEEN, mina.backout
    lauren.animate {transform: "t0,0s0.4"}, TWEEN, mina.easeinout

  slide.visible = true
  return slide

Example.html

<section>
  ...
  <svg 
    id="anim_1"
    class="anim"
    viewBox="0 0 600 400">
  </svg>
  ...
</section>