Animations
Rows, Columns, Items, Images and Buttons can be animated, by adding classes to the element.
The animation is activated when:
or 2: when item enters viewport
Use "js-animate" + <effectname>
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
js-animate fadeInUp
js-animate fadeInUp delay-1s
js-animate fadeInUp delay-2s