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
-
js-animate bounceInUp delay-1s
-
js-animate flipInY
-
js-animate backInLeft delay-2s
Attention seekers
-
bounce
-
flash
-
pulse
-
rubberBand
-
shakeX
-
shakeY
-
headShake
-
swing
-
tada
-
wobble
-
jello
-
heartBeat
Back entrances
-
backInDown
-
backInLeft
-
backInRight
-
backInUp
Bouncing entrances
-
bounceIn
-
bounceInDown
-
bounceInLeft
-
bounceInRight
-
bounceInUp
Fading entrances
-
fadeIn
-
fadeInDown
-
fadeInDownBig
-
fadeInLeft
-
fadeInLeftBig
-
fadeInRight
-
fadeInRightBig
-
fadeInUp
-
fadeInUpBig
-
fadeInTopLeft
-
fadeInTopRight
-
fadeInBottomLeft
-
fadeInBottomRight
Flippers
-
flip
-
flipInX
-
flipInY
Rotating entrances
-
rotateIn
-
rotateInDownLeft
-
rotateInDownRight
-
rotateInUpLeft
-
rotateInUpRight
Zooming entrances
-
zoomIn
-
zoomInDown
-
zoomInLeft
-
zoomInRight
-
zoomInUp
Sliding entrances
-
slideInDown
-
slideInLeft
-
slideInRight
-
slideInUp