Animations

Included in this theme 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.

Note: by default, this theme uses the legacy version of the animate.css library.

Keep in mind that animations add much processing power to the browser, so use them carefully.

Here are a few examples:

ZoomIn

SlideInUp

slideInLeft

slideInRight

wobble

pulse

Available animation classes

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 modifiers

  • delay-1s
  • delay-2s
  • delay-3s
  • delay-4s
  • delay-5s

Animation speed modifiers:

  • slow: 1/2 animation speed
  • slower: 1/3 animation speed
  • fast: 1.5x animation speed
  • faster: 2x animation speed