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"

    or 2: when item enters viewport

    Use "js-animate" + <effectname>

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

Register and get
many advantages

5% discount on your first order

Items on sale!

js-animate fadeInUp

js-animate fadeInUp delay-1s

js-animate fadeInUp delay-2s