Animations

Rows, Columns, Items, Images and Buttons can be animated, by adding classes to the element.

  • Animations will only start one time. Choose how to activate:


    1: directly when page is loaded

    Use "animated" + <effectname>

  • placeholder

    "animated zoomIn"

  • or 2: when item enters viewport

    Use "js-animate" + <effectname>

  • placeholder

    "js-animate fadeInRight"

  • Optional timings:

    Add "delay", "speed" or "repeat" classes to the element, e.g.:

    "js-animate fadeInRight delay-3s slower repeat-2"


    Delays

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


    Speed

    • slower
    • slow
    • fast
    • faster


    Repeat

    • repeat-1
    • repeat-2
    • repeat-3
    • infinite
  • Animations will not work when
    a user returns to a page by using the browsers "back" function. e.g.:
    load/scroll page -> the element animates -> leave page -> return (back) to previous page -> elements will not animate.


    Animations will not work when
    the browser of the (mobile) device has the setting "prefers-reduced-motion" enabled. The content will still be visible, but without animation.

Examples: