 
       $($(@el).find('.statbar')[0]).children('div')
         .html('hp ' + @model.get("stats").health)
-        .width(100 *
-          (@model.get("stats").health / @model.get("maxStats").health))
+        .width(10)
+        .animate {
+          width: (100 *
+            (@model.get("stats").health / @model.get("maxStats").health))
+          },
+          { duration: ANIMATION_SPEED.SLOW }
       $($(@el).find('.statbar')[1]).children('div')
         .html('mp ' + @model.get("stats").mana)
-        .width(100 *
-          (@model.get("stats").mana / @model.get("maxStats").mana))
-
+        .width(10)
+        .animate {
+          width: (100 *
+            (@model.get("stats").mana / @model.get("maxStats").mana))
+          },
+          { duration: ANIMATION_SPEED.SLOW }
 
 
   class WorldUI extends view.View

      @elOverlay.html ""

    hideOverlay: ->
      @elOverlay.hide 500

    showOverlay: ->
      @elOverlay.show 500

  return {
    WorldUI: WorldUI

deps = ["use!use/jquery", "cs!../view", "use!use/underscore",
  "cs!../resource"]
define deps, ($, view, _, resource) ->

  ANIMATION_SPEED =
    FAST: 300
    SLOW: 600

  class CharacterOverlay extends view.UIView
    tagName: "div"
