diff --git a/console/slides/presets/animation.yaml b/console/slides/presets/animation.yaml
new file mode 100644
index 0000000..9c4a5df
--- /dev/null
+++ b/console/slides/presets/animation.yaml
@@ -0,0 +1,393 @@
+animation:
+  backindown:
+    name: backInDown
+    open: '<div class="animation backInDown ahide" data-animation-type="backInDown" data-animation-in="backInDown" data-animation-out="">'
+    close: </div>
+  backinleft:
+    name: backInLeft
+    open: '<div class="animation backInLeft ahide" data-animation-type="backInLeft" data-animation-in="backInLeft" data-animation-out="">'
+    close: </div>
+  backinright:
+    name: backinright
+    open: '<div class="animation backinright ahide" data-animation-type="backInRight" data-animation-in="backInRight" data-animation-out="">'
+    close: </div>
+  backinup:
+    name: backInUp
+    open: '<div class="animation backInUp ahide" data-animation-type="backInUp" data-animation-in="backInUp" data-animation-out="">'
+    close: </div>
+  backoutdown:
+    name: backOutDown
+    open: '<div class="animation backOutDown ahide" data-animation-type="backOutDown" data-animation-in="" data-animation-out="backOutDown">'
+    close: </div>
+  backoutleft:
+    name: backOutLeft
+    open: '<div class="animation backOutLeft ahide" data-animation-type="backOutLeft" data-animation-in="" data-animation-out="backOutLeft">'
+    close: </div>
+  backoutright:
+    name: backOutRight
+    open: '<div class="animation backOutRight ahide" data-animation-type="backOutRight" data-animation-in="" data-animation-out="backOutRight">'
+    close: </div>
+  backoutup:
+    name: backOutUp
+    open: '<div class="animation backOutUp ahide" data-animation-type="backOutUp" data-animation-in="" data-animation-out="backOutUp">'
+    close: </div>
+  bounce:
+    name: bounce
+    open: '<div class="animation bounce" data-animation-type="bounce" data-animation-in="bounce" data-animation-out="">'
+    close: </div>
+  bouncein:
+    name: bounceIn
+    open: '<div class="animation bounceIn ahide" data-animation-type="bounceIn" data-animation-in="bounceIn" data-animation-out="">'
+    close: </div>
+  bounceindown:
+    name: bounceInDown
+    open: '<div class="animation bounceInDown ahide" data-animation-type="bounceInDown" data-animation-in="bounceInDown" data-animation-out="">'
+    close: </div>
+  bounceinleft:
+    name: bounceInLeft
+    open: '<div class="animation bounceInLeft ahide" data-animation-type="bounceInLeft" data-animation-in="bounceInLeft" data-animation-out="">'
+    close: </div>
+  bounceinright:
+    name: bounceInRight
+    open: '<div class="animation bounceInRight ahide" data-animation-type="bounceInRight" data-animation-in="bounceInRight" data-animation-out="">'
+    close: </div>
+  bounceinup:
+    name: bounceInUp
+    open: '<div class="animation bounceInUp ahide" data-animation-type="bounceInUp" data-animation-in="bounceInUp" data-animation-out="">'
+    close: </div>
+  bounceout:
+    name: bounceOut
+    open: '<div class="animation bounceOut ahide" data-animation-type="bounceOut" data-animation-in="" data-animation-out="bounceOut">'
+    close: </div>
+  bounceoutdown:
+    name: bounceOutDown
+    open: '<div class="animation bounceOutDown ahide" data-animation-type="bounceOutDown" data-animation-in="" data-animation-out="bounceOutDown">'
+    close: </div>
+  bounceoutleft:
+    name: bounceOutLeft
+    open: '<div class="animation bounceOutLeft ahide" data-animation-type="bounceOutLeft" data-animation-in="" data-animation-out="bounceOutLeft">'
+    close: </div>
+  bounceoutright:
+    name: bounceOutRight
+    open: '<div class="animation bounceOutRight ahide" data-animation-type="bounceOutRight" data-animation-in="" data-animation-out="bounceOutRight">'
+    close: </div>
+  bounceoutup:
+    name: bounceOutUp
+    open: '<div class="animation bounceOutUp ahide" data-animation-type="bounceOutUp" data-animation-in="" data-animation-out="bounceOutUp">'
+    close: </div>
+  fadein:
+    name: fadeIn
+    open: '<div class="animation fadeIn ahide" data-animation-type="fadeIn" data-animation-in="fadeIn" data-animation-out="">'
+    close: </div>
+  fadeinout:
+    name: fadeinout
+    open: '<div class="animation fadeinout ahide" data-animation-type="fadeIn" data-animation-in="fadeIn" data-animation-out="fadeOut">'
+    close: </div>
+  fadeinbottomleft:
+    name: fadeInBottomLeft
+    open: '<div class="animation fadeInBottomLeft ahide" data-animation-type="fadeInBottomLeft" data-animation-in="fadeInBottomLeft" data-animation-out="">'
+    close: </div>
+  fadeinbottomright:
+    name: fadeInBottomRight
+    open: '<div class="animation fadeInBottomRight ahide" data-animation-type="fadeInBottomRight" data-animation-in="fadeInBottomRight" data-animation-out="">'
+    close: </div>
+  fadeindown:
+    name: fadeInDown
+    open: '<div class="animation fadeInDown ahide" data-animation-type="fadeInDown" data-animation-in="fadeInDown" data-animation-out="">'
+    close: </div>
+  fadeindownbig:
+    name: fadeInDownBig
+    open: '<div class="animation fadeInDownBig ahide" data-animation-type="fadeInDownBig" data-animation-in="fadeInDownBig" data-animation-out="">'
+    close: </div>
+  fadeinleft:
+    name: fadeInLeft
+    open: '<div class="animation fadeInLeft ahide" data-animation-type="fadeInLeft" data-animation-in="fadeInLeft" data-animation-out="">'
+    close: </div>
+  fadeinleftbig:
+    name: fadeInLeftBig
+    open: '<div class="animation fadeInLeftBig ahide" data-animation-type="fadeInLeftBig" data-animation-in="fadeInLeftBig" data-animation-out="">'
+    close: </div>
+  fadeinright:
+    name: fadeInRight
+    open: '<div class="animation fadeInRight ahide" data-animation-type="fadeInRight" data-animation-in="fadeInRight" data-animation-out="">'
+    close: </div>
+  fadeinrightbig:
+    name: fadeInRightBig
+    open: '<div class="animation fadeInRightBig ahide" data-animation-type="fadeInRightBig" data-animation-in="fadeInRightBig" data-animation-out="">'
+    close: </div>
+  fadeintopleft:
+    name: fadeInTopLeft
+    open: '<div class="animation fadeInTopLeft ahide" data-animation-type="fadeInTopLeft" data-animation-in="fadeInTopLeft" data-animation-out="">'
+    close: </div>
+  fadeintopright:
+    name: fadeInTopRight
+    open: '<div class="animation fadeInTopRight ahide" data-animation-type="fadeInTopRight" data-animation-in="fadeInTopRight" data-animation-out="">'
+    close: </div>
+  fadeinup:
+    name: fadeInUp
+    open: '<div class="animation fadeInUp ahide" data-animation-type="fadeInUp" data-animation-in="fadeInUp" data-animation-out="">'
+    close: </div>
+  fadeinupbig:
+    name: fadeInUpBig
+    open: '<div class="animation fadeInUpBig ahide" data-animation-type="fadeInUpBig" data-animation-in="fadeInUpBig" data-animation-out="">'
+    close: </div>
+  fadeout:
+    name: fadeOut
+    open: '<div class="animation fadeOut ahide" data-animation-type="fadeOut" data-animation-in="" data-animation-out="fadeOut">'
+    close: </div>
+  fadeoutbottomleft:
+    name: fadeOutBottomLeft
+    open: '<div class="animation fadeOutBottomLeft ahide" data-animation-type="fadeOutBottomLeft" data-animation-in="" data-animation-out="fadeOutBottomLeft">'
+    close: </div>
+  fadeoutbottomright:
+    name: fadeOutBottomRight
+    open: '<div class="animation fadeOutBottomRight ahide" data-animation-type="fadeOutBottomRight" data-animation-in="" data-animation-out="fadeOutBottomRight">'
+    close: </div>
+  fadeoutdown:
+    name: fadeOutDown
+    open: '<div class="animation fadeOutDown ahide" data-animation-type="fadeOutDown" data-animation-in="" data-animation-out="fadeOutDown">'
+    close: </div>
+  fadeoutdownbig:
+    name: fadeOutDownBig
+    open: '<div class="animation fadeOutDownBig ahide" data-animation-type="fadeOutDownBig" data-animation-in="" data-animation-out="fadeOutDownBig">'
+    close: </div>
+  fadeoutleft:
+    name: fadeOutLeft
+    open: '<div class="animation fadeOutLeft ahide" data-animation-type="fadeOutLeft" data-animation-in="" data-animation-out="fadeOutLeft">'
+    close: </div>
+  fadeoutleftbig:
+    name: fadeOutLeftBig
+    open: '<div class="animation fadeOutLeftBig ahide" data-animation-type="fadeOutLeftBig" data-animation-in="" data-animation-out="fadeOutLeftBig">'
+    close: </div>
+  fadeoutright:
+    name: fadeOutRight
+    open: '<div class="animation fadeOutRight ahide" data-animation-type="fadeOutRight" data-animation-in="" data-animation-out="fadeOutRight">'
+    close: </div>
+  fadeoutrightbig:
+    name: fadeOutRightBig
+    open: '<div class="animation fadeOutRightBig ahide" data-animation-type="fadeOutRightBig" data-animation-in="" data-animation-out="fadeOutRightBig">'
+    close: </div>
+  fadeouttopleft:
+    name: fadeOutTopLeft
+    open: '<div class="animation fadeOutTopLeft ahide" data-animation-type="fadeOutTopLeft" data-animation-in="" data-animation-out="fadeOutTopLeft">'
+    close: </div>
+  fadeouttopright:
+    name: fadeOutTopRight
+    open: '<div class="animation fadeOutTopRight ahide" data-animation-type="fadeOutTopRight" data-animation-in="" data-animation-out="fadeOutTopRight">'
+    close: </div>
+  fadeoutup:
+    name: fadeOutUp
+    open: '<div class="animation fadeOutUp ahide" data-animation-type="fadeOutUp" data-animation-in="" data-animation-out="fadeOutUp">'
+    close: </div>
+  fadeoutupbig:
+    name: fadeOutUpBig
+    open: '<div class="animation fadeOutUpBig ahide" data-animation-type="fadeOutUpBig" data-animation-in="" data-animation-out="fadeOutUpBig">'
+    close: </div>
+  flash:
+    name: flash
+    open: '<div class="animation flash" data-animation-type="flash" data-animation-in="flash" data-animation-out="">'
+    close: </div>
+  flip:
+    name: flip
+    open: '<div class="animation flip" data-animation-type="flip" data-animation-in="flip" data-animation-out="">'
+    close: </div>
+  flipinx:
+    name: flipInX
+    open: '<div class="animation flipInX ahide" data-animation-type="flipInX" data-animation-in="flipInX" data-animation-out="">'
+    close: </div>
+  flipiny:
+    name: flipInY
+    open: '<div class="animation flipInY ahide" data-animation-type="flipInY" data-animation-in="flipInY" data-animation-out="">'
+    close: </div>
+  flipoutx:
+    name: flipOutX
+    open: '<div class="animation flipOutX ahide" data-animation-type="flipOutX" data-animation-in="" data-animation-out="flipOutX">'
+    close: </div>
+  flipouty:
+    name: flipOutY
+    open: '<div class="animation flipOutY ahide" data-animation-type="flipOutY" data-animation-in="" data-animation-out="flipouty">'
+    close: </div>
+  headshake:
+    name: headShake
+    open: '<div class="animation headShake" data-animation-type="headShake" data-animation-in="headshake" data-animation-out="">'
+    close: </div>
+  heartbeat:
+    name: heartBeat
+    open: '<div class="animation heartBeat" data-animation-type="heartBeat" data-animation-in="heartbeat" data-animation-out="">'
+    close: </div>
+  hinge:
+    name: hinge
+    open: '<div class="animation hinge" data-animation-type="hinge" data-animation-in="hinge" data-animation-out="">'
+    close: </div>
+  jackinthebox:
+    name: jackInTheBox
+    open: '<div class="animation jackInTheBox" data-animation-type="jackInTheBox" data-animation-in="jackinthebox" data-animation-out="">'
+    close: </div>
+  jello:
+    name: jello
+    open: '<div class="animation jello" data-animation-type="jello" data-animation-in="jello" data-animation-out="">'
+    close: </div>
+  lightspeedinleft:
+    name: lightSpeedInLeft
+    open: '<div class="animation lightSpeedInLeft ahide" data-animation-type="lightSpeedInLeft" data-animation-in="lightSpeedInLeft" data-animation-out="">'
+    close: </div>
+  lightspeedinright:
+    name: lightSpeedInRight
+    open: '<div class="animation lightSpeedInRight ahide" data-animation-type="lightSpeedInRight" data-animation-in="lightSpeedInRight" data-animation-out="">'
+    close: </div>
+  lightspeedoutleft:
+    name: lightSpeedOutLeft
+    open: '<div class="animation lightSpeedOutLeft ahide" data-animation-type="lightSpeedOutLeft" data-animation-in="" data-animation-out="lightSpeedOutLeft">'
+    close: </div>
+  lightspeedoutright:
+    name: lightSpeedOutRight
+    open: '<div class="animation lightSpeedOutRight ahide" data-animation-type="lightSpeedOutRight" data-animation-in="" data-animation-out="lightSpeedOutRight">'
+    close: </div>
+  pulse:
+    name: pulse
+    open: '<div class="animation pulse" data-animation-type="pulse" data-animation-in="pulse" data-animation-out="">'
+    close: </div>
+  rollin:
+    name: rollIn
+    open: '<div class="animation rollIn ahide" data-animation-type="rollIn" data-animation-in="rollIn" data-animation-out="">'
+    close: </div>
+  rollout:
+    name: rollOut
+    open: '<div class="animation rollOut ahide" data-animation-type="rollOut" data-animation-in="" data-animation-out="rollOut">'
+    close: </div>
+  rotatein:
+    name: rotateIn
+    open: '<div class="animation rotateIn ahide" data-animation-type="rotateIn" data-animation-in="rotateIn" data-animation-out="">'
+    close: </div>
+  rotateindownleft:
+    name: rotateInDownLeft
+    open: '<div class="animation rotateInDownLeft ahide" data-animation-type="rotateInDownLeft" data-animation-in="rotateInDownLeft" data-animation-out="">'
+    close: </div>
+  rotateindownright:
+    name: rotateInDownRight
+    open: '<div class="animation rotateInDownRight ahide" data-animation-type="rotateInDownRight" data-animation-in="rotateInDownRight" data-animation-out="">'
+    close: </div>
+  rotateinupleft:
+    name: rotateInUpLeft
+    open: '<div class="animation rotateInUpLeft ahide" data-animation-type="rotateInUpLeft" data-animation-in="rotateInUpLeft" data-animation-out="">'
+    close: </div>
+  rotateinupright:
+    name: rotateInUpRight
+    open: '<div class="animation rotateInUpRight ahide" data-animation-type="rotateInUpRight" data-animation-in="rotateInUpRight" data-animation-out="">'
+    close: </div>
+  rotateout:
+    name: rotateOut
+    open: '<div class="animation rotateOut ahide" data-animation-type="rotateOut" data-animation-in="" data-animation-out="rotateOut">'
+    close: </div>
+  rotateoutdownleft:
+    name: rotateOutDownLeft
+    open: '<div class="animation rotateOutDownLeft ahide" data-animation-type="rotateOutDownLeft" data-animation-in="" data-animation-out="rotateOutDownLeft">'
+    close: </div>
+  rotateoutdownright:
+    name: rotateOutDownRight
+    open: '<div class="animation rotateOutDownRight ahide" data-animation-type="rotateOutDownRight" data-animation-in="" data-animation-out="rotateOutDownRight">'
+    close: </div>
+  rotateoutupleft:
+    name: rotateOutUpLeft
+    open: '<div class="animation rotateOutUpLeft ahide" data-animation-type="rotateOutUpLeft" data-animation-in="" data-animation-out="rotateOutUpLeft">'
+    close: </div>
+  rotateoutupright:
+    name: rotateOutUpRight
+    open: '<div class="animation rotateOutUpRight ahide" data-animation-type="rotateOutUpRight" data-animation-in="" data-animation-out="rotateOutUpRight">'
+    close: </div>
+  rubberband:
+    name: rubberBand
+    open: '<div class="animation rubberBand" data-animation-type="rubberBand" data-animation-in="rubberband" data-animation-out="">'
+    close: </div>
+  shakex:
+    name: shakeX
+    open: '<div class="animation shakeX" data-animation-type="shakeX" data-animation-in="shakex" data-animation-out="">'
+    close: </div>
+  shakey:
+    name: shakeY
+    open: '<div class="animation shakeY" data-animation-type="shakeY" data-animation-in="shakey" data-animation-out="">'
+    close: </div>
+  slideindown:
+    name: slideInDown
+    open: '<div class="animation slideInDown ahide" data-animation-type="slideInDown" data-animation-in="slideInDown" data-animation-out="">'
+    close: </div>
+  slideinleft:
+    name: slideInLeft
+    open: '<div class="animation slideInLeft ahide" data-animation-type="slideInLeft" data-animation-in="slideInLeft" data-animation-out="">'
+    close: </div>
+  slideinright:
+    name: slideInRight
+    open: '<div class="animation slideInRight ahide" data-animation-type="slideInRight" data-animation-in="slideInRight" data-animation-out="">'
+    close: </div>
+  slideinup:
+    name: slideInUp
+    open: '<div class="animation slideInUp ahide" data-animation-type="slideInUp" data-animation-in="slideInUp" data-animation-out="">'
+    close: </div>
+  slideoutdown:
+    name: slideOutDown
+    open: '<div class="animation slideOutDown ahide" data-animation-type="slideOutDown" data-animation-in="" data-animation-out="slideOutDown">'
+    close: </div>
+  slideoutleft:
+    name: slideOutLeft
+    open: '<div class="animation slideOutLeft ahide" data-animation-type="slideOutLeft" data-animation-in="" data-animation-out="slideOutLeft">'
+    close: </div>
+  slideoutright:
+    name: slideOutRight
+    open: '<div class="animation slideOutRight ahide" data-animation-type="slideOutRight" data-animation-in="" data-animation-out="slideOutRight">'
+    close: </div>
+  slideoutup:
+    name: slideOutUp
+    open: '<div class="animation slideOutUp ahide" data-animation-type="slideOutUp" data-animation-in="" data-animation-out="slideOutUp">'
+    close: </div>
+  swing:
+    name: swing
+    open: '<div class="animation swing" data-animation-type="swing" data-animation-in="swing" data-animation-out="">'
+    close: </div>
+  tada:
+    name: tada
+    open: '<div class="animation tada" data-animation-type="tada" data-animation-in="tada" data-animation-out="">'
+    close: </div>
+  wobble:
+    name: wobble
+    open: '<div class="animation wobble" data-animation-type="wobble" data-animation-in="wobble" data-animation-out="">'
+    close: </div>
+  zoomin:
+    name: zoomIn
+    open: '<div class="animation zoomIn ahide" data-animation-type="zoomIn" data-animation-in="zoomIn" data-animation-out="">'
+    close: </div>
+  zoomindown:
+    name: zoomInDown
+    open: '<div class="animation zoomInDown ahide" data-animation-type="zoomInDown" data-animation-in="zoomInDown" data-animation-out="">'
+    close: </div>
+  zoominleft:
+    name: zoomInLeft
+    open: '<div class="animation zoomInLeft ahide" data-animation-type="zoomInLeft" data-animation-in="zoomInLeft" data-animation-out="">'
+    close: </div>
+  zoominright:
+    name: zoomInRight
+    open: '<div class="animation zoomInRight ahide" data-animation-type="zoomInRight" data-animation-in="zoomInRight" data-animation-out="">'
+    close: </div>
+  zoominup:
+    name: zoomInUp
+    open: '<div class="animation zoomInUp ahide" data-animation-type="zoomInUp" data-animation-in="zoomInUp" data-animation-out="">'
+    close: </div>
+  zoomout:
+    name: zoomOut
+    open: '<div class="animation zoomOut ahide" data-animation-type="zoomOut" data-animation-in="" data-animation-out="zoomOut">'
+    close: </div>
+  zoomoutdown:
+    name: zoomOutDown
+    open: '<div class="animation zoomOutDown ahide" data-animation-type="zoomOutDown" data-animation-in="" data-animation-out="zoomOutDown">'
+    close: </div>
+  zoomoutleft:
+    name: zoomOutLeft
+    open: '<div class="animation zoomOutLeft ahide" data-animation-type="zoomOutLeft" data-animation-in="" data-animation-out="zoomOutLeft">'
+    close: </div>
+  zoomoutright:
+    name: zoomOutRight
+    open: '<div class="animation zoomOutRight ahide" data-animation-type="zoomOutRight" data-animation-in="" data-animation-out="zoomOutRight">'
+    close: </div>
+  zoomoutup:
+    name: zoomOutUp
+    open: '<div class="animation zoomOutUp ahide" data-animation-type="zoomOutUp" data-animation-in="" data-animation-out="zoomOutUp">'
+    close: </div>