Moments splash animation

moments.coffee

# Moments splash page
# (c) momentsapp.com

jQuery ->

  # Set up elements required
  $container = $('#canvas')

  # Set up raphael and the moments circles
  paper = new Raphael(
    $container[0],
    $container.width(),
    $container.height()
  )

  # Paper canvas element
  canvas = paper.canvas

  # Paper dimensions
  width = if canvas.clientWidth then canvas.clientWidth else paper.width
  height = if canvas.clientHeight then canvas.clientHeight else paper.height

  # Middle points
  midx = width / 2
  midy = height / 2

  # Moments logo element
  text = paper.image('http://i.imgur.com/KnRLKPl.png', 0, 0, width, height)
  text.attr 'opacity', 0.0

  # Raphael set of circles
  radius1 = 65
  radius2 = radius1 * 0.8
  radius3 = radius1 * 0.5
  circleSet = paper.set()
  circleSet.push paper.circle(midx, midy, radius1).attr('fill', '#00a8ff')
  circleSet.push paper.circle(midx, midy, radius2).attr('fill', '#b5e9ff')
  circleSet.push paper.circle(midx, midy, radius3).attr('fill', '#ffffff')

  # Remove all strokes
  circleSet.attr 'stroke', 'none'
  circleSet.attr 'opacity', 0.0

  # Create animation objects
  circleFadeInAnimation = Raphael.animation
    opacity: 1.0
  , 1000, 'easeInOut', -> animateCircleShift()

  circleShiftAnimation = Raphael.animation
    cx: 242
  , 1500, 'easeInOut', -> animateLogoFadeIn()

  logoFadeInAnimation = Raphael.animation
    opacity: 1.0
  , 1000, 'easeInOut', -> animateCirclePulse()

  circlePulseAnimation = Raphael.animation(
    transform: 's2,s0.5'
  , 1500, 'easeInOut').repeat(Infinity)

  # Animation functions for callbacks and such
  animateCircleIn = ->
    circleSet.animate circleFadeInAnimation

  animateCircleShift = ->
    circleSet.animate circleShiftAnimation.delay(500)

  animateLogoFadeIn = ->
    text.animate(logoFadeInAnimation.delay(500))

  animateCirclePulse = ->
    circleSet.animate circlePulseAnimation.delay(100)

  # Start
  animateCircleIn()

  true