CodePen

HTML

            
              #shoebox
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body
  background: #4f678e
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              # Dribbble rebound to CodePen crossover: http://drbl.in/jzmR

# variables
frequency = 2000
color_1 = '#202c3b' # dark blue
color_2 = '#bc2331' # chuck taylor red
color_3 = '#e6e7e8' # grey
shoe_canvas_path = 'M235.5,316v29.5h395.833v-90c0,0-109.333,5-156.833-29.5L235.5,316z'
toe_path = 'M137.333,345l98.167-0.5v-28.167C235.5,316.333,145.198,314.333,137.333,345z'
lace_path = 'M282.784,299.903c0.021,2.595-2.35,4.718-5.296,4.742l0,0c-2.945,0.023-5.35-2.062-5.37-4.657 l-0.168-21.147c-0.021-2.595,2.35-4.718,5.296-4.742l0,0c2.945-0.023,5.35,2.062,5.37,4.657L282.784,299.903z'
long_lace_path = 'M406.703,419.283c0,3.802-2.369,4.883-5.292,4.883l0,0c-2.923,0-5.292-1.082-5.292-4.883V271.717
c0-3.802,2.369-4.883,5.292-4.883l0,0c2.923,0,5.292,1.082,5.292,4.883V419.283z'
shoe_tongue_path = 'M419.168,152.667l-19.667,22c0,0-0.667,3.667,31,15C430.501,189.667,449.168,173.667,419.168,152.667z'
heel_path = 'M548.333,256.667c0,0,51.494-19.29,65.333-26c11-5.333,16.667,4,16.667,9.667c0,5.667,0,16.333,0,16.333
H548.333z'

# easing
backOut = (pos) ->
  pos = pos - 1
  s = 1.70158
  return pos * pos * ((s + 1) * pos + s) + 1

circOut = (pos) ->
  return Math.sqrt(1 - Math.pow((pos-1), 2))

circIn = (pos) ->
  return -(Math.sqrt(1 - (pos*pos)) - 1)

elastic = (pos) ->
  if pos == !!pos then return pos
  return Math.pow(2, -10 * pos) * Math.sin((pos - 0.075) * (2 * Math.PI) / .3) + 1

# animate it
animateShoe = ->
  sole.animate(250, circOut, 0).during( (pos, morph) ->
    @.show().scale(morph(0.1, 1), morph(1, 1))
      .translate(morph(387,137), morph(342,342))
  ).after( ->
    shoe_canvas.animate(550, circOut, 0).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0, 1))
        .translate(morph(235,235), morph(346,226))
    )
    sole_stripe.animate(300, circOut, 0).during( (pos, morph) ->
      @.show().scale(morph(0.1, 1), morph(1, 1))
        .translate(morph(602,340), morph(357,357))
    )
    toe.animate(100, '>', 180).during( (pos, morph) ->
      @.show().scale(morph(0.1, 1), morph(1, 1))
        .translate(morph(225,137), morph(314,314))
    )
    lace_hole1.animate(200, backOut, 250).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(308,299), morph(304,296))
    )
    lace1.animate(120, backOut, 300).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0, 1))
        .translate(morph(420,408), morph(40,10))
    )
    lace_hole2.animate(200, backOut, 300).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(329,329), morph(284,284))
    )
    lace2.animate(120, backOut, 350).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(450,438), morph(28,-2))
    )
    lace_hole3.animate(200, backOut, 350).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(355,358), morph(274,274))
    )
    lace3.animate(120, backOut, 400).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(479,467), morph(13,-13))
    )
    lace_hole4.animate(200, backOut, 400).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(385,388), morph(264,264))
    )
    lace4.animate(120, backOut, 450).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(508,496), morph(2,-23))
    )
    lace_hole5.animate(200, backOut, 450).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(412,416), morph(254,254))
    )
    lace5.animate(220, backOut, 500).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0.1, 1))
        .translate(morph(420,420), morph(250,107))
        .rotate(morph(0, 180),425,262)
    )
    lace_tip.animate(100, backOut, 720).during( (pos, morph) ->
      @.show().scale(morph(0, 1), morph(1, 1))
        .translate(morph(-120,-116), morph(395,395))
    )
    lace_tip_end.animate(100, backOut, 720).during( (pos, morph) ->
      @.show().scale(morph(0, 1), morph(1, 1))
        .translate(morph(450,450), morph(408,408))
    )
    shoe_tongue.animate(200, backOut, 400).during( (pos, morph) ->
      @.show().scale(morph(0, 1), morph(0, 1))
        .translate(morph(460,473), morph(240,205))
    )
    shoe_heel.animate(550, circOut, 300).during( (pos, morph) ->
      @.show().scale(morph(1, 1), morph(0, 1))
        .translate(morph(548,548), morph(275,228))
    )
  )

# build shoe
draw = SVG('shoebox')
# repsponsive svg (https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio)
  .attr('preserveAspectRatio': "xMidYMin meet")
draw.viewbox(0, 0, 800, 600)
shoe_tongue = draw
  .path(shoe_tongue_path)
  .fill('white')
  .translate(485,203)
  .hide()
shoe_heel = draw
  .path(heel_path)
  .fill(color_1)
  .translate(550,225)
  .hide()
shoe_canvas = draw
  .path(shoe_canvas_path)
  .fill(color_2)
  .translate(235,226)
  .hide()
toe = draw
  .path(toe_path)
  .fill('white')
  .translate(137,314)
  .hide()
sole = draw
  .rect('494', '38')
  .fill(color_3)
  .translate(137,342)
  .hide()
sole_stripe = draw
  .rect('292', '12')
  .fill(color_1)
  .translate(340,357)
  .hide()
lace_hole1 = draw.circle(18)
  .fill(color_1)
  .translate(299,296)
  .hide()
lace1 = draw
  .path(lace_path)
  .fill('white')
  .rotate(-45)
  .translate(408,10)
  .hide()
lace_hole2 = draw.circle(18)
  .fill(color_1)
  .translate(329,286)
  .hide()
lace2 = draw
  .path(lace_path)
  .fill('white')
  .rotate(-45)
  .translate(428,5)
  .hide()
lace_hole3 = draw.circle(18)
  .fill(color_1)
  .translate(369,246)
  .hide()
lace3 = draw
  .path(lace_path)
  .fill('white')
  .rotate(-45)
  .translate(428,5)
  .hide()
lace_hole4 = draw.circle(18)
  .fill(color_1)
  .translate(369,246)
  .hide()
lace4 = draw
  .path(lace_path)
  .fill('white')
  .rotate(-45)
  .translate(428,5)
  .hide()
lace_hole5 = draw.circle(18)
  .fill(color_1)
  .translate(369,246)
  .hide()
lace5 = draw
  .path(long_lace_path)
  .fill('white')
  .translate(420,107)
  .hide()
lace_tip = draw
  .path(lace_path)
  .fill('white')
  .rotate(90)
  .translate(-116,395)
  .hide()
lace_tip_end = draw.rect(22,8)
  .fill('white')
  .translate(420,420)
  .hide()

# start it
animateShoe()

# keep the party going
setInterval ( ->
  draw.each( (i, children) ->
    @.hide()
  )
  animateShoe()
), frequency
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................