Menu
Menu
ma.di.wo.do.vr.za.zo.
ma.di.wo.do.vr.za.zo.

Animations

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

The animation is activated when:

  • 1: directly when page is loaded

    Use "animated" + <effectname>

  • "animated zoomIn"

    More InfoMore Info

  • or 2: when item enters viewport

    Use "js-animate" + <effectname>

  • "js-animate fadeInRight"

    More InfoMore Info

  • 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:

  • js-animate fadeInUp

  • js-animate fadeInUp delay-1s

  • js-animate fadeInUp delay-2s

forms:.title