Animations!

Included in this starter kit is a way to simply and easily add a variety of on-scroll animations, powered by animate.css. To use animation you simply add "animation" and the animation class name (p.e. fadeIn) to the CSS field of any element, even slider elements (note that with the default Contao slider only the first slide will play animations).

Additionally you can apply delay classes to force elements to appear in a certain order.

Find out more about available animations here. Keep in mind that animations add much processing power to the browser, so use them carefully.

Here are just a few examples:

Available animations

bounce
flash
pulse
rubberBand
shake
swing
tada
wobble
jello
bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight

fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
flip
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut

rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
slideInUp
slideInDown
slideInLeft
slideInRight
slideOutUp
slideOutDown
slideOutLeft
slideOutRight
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
hinge
rollIn
rollOut

Delay and Speed classes

  • delay-250 (i.e. .25s)
  • delay-500 (i.e. .5s)
  • delay-750 (i.e. .75s)
  • delay-1000 (i.e. 1s)
  • delay-1250 (i.e. 1.25s)
  • delay-1500 (i.e. 1.5s)
  • delay-1750 (i.e. 1.75s)
  • delay-2000 (i.e. 2s)
  • delay-2500 (i.e. 2.5s)
  • delay-3000 (i.e. 3s)
  • delay-3500 (i.e. 3.5s)

Animation speed modifiers:

  • slow: animation speed of 1.5s
  • slower: animation speed of 2s
  • slowest: animation speed of 3s