Menu
Menu

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

    forms:.title