Animations

Scroll to reveal Animations that are displayed when you scroll past them. Can be used on any element.

Code Example

<!-- Simple Example -->
<div data-animate="fadeInLeft"></div>

<!-- With Delay -->
<div data-animate="fadeInLeft" data-delay="500"></div>

Settings

Setting Description
data-animate

The Animation Style of the Element.

Option(s):

  • bounce
  • flash
  • pulse
  • rubberBand
  • shakeX
  • shakeY
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • heartBeat
  • backInDown
  • backInLeft
  • backInRight
  • backInUp
  • backOutDown
  • backOutLeft
  • backOutRight
  • backOutUp
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeInTopLeft
  • fadeInTopRight
  • fadeInBottomLeft
  • fadeInBottomRight
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • fadeOutTopLeft
  • fadeOutTopRight
  • fadeOutBottomRight
  • fadeOutBottomLeft
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedInRight
  • lightSpeedInLeft
  • lightSpeedOutRight
  • lightSpeedOutLeft
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • jackInTheBox
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp
You can use all the available options from here: Animation Options

data-delay

The Delay Duration in milliseconds after which the Animation will be triggered.

Option(s): 600

Last Modified: August 20, 2020