BACK TO ARTICLE

Animate on Scroll Demo with All aniamtions

Keep Scrolling to see all animations

Sliding Entrances

slideInUp

Example

<div class=" slideInUp scrollanimation animated"></div>

slideInDown

Example

<div class=" slideInDown scrollanimation animated"></div>

slideInLeft

Example

<div class=" slideInLeft scrollanimation animated"></div>

slideInRight

Example

<div class=" slideInRight scrollanimation animated"></div>

Zoom Entrances

zoomIn

Example

<div class=" zoomIn scrollanimation animated"></div>

zoomInDown

Example

<div class=" zoomInDown scrollanimation animated"></div>

zoomInLeft

Example

<div class=" zoomInLeft scrollanimation animated"></div>

zoomInRight

Example

<div class=" zoomInRight scrollanimation animated"></div>

zoomInUp

Example

<div class=" zoomInUp scrollanimation animated"></div>

Rotating Entrances

rotateIn

Example

<div class=" rotateIn scrollanimation animated"></div>

rotateInDownLeft

Example

<div class=" rotateInDownLeft scrollanimation animated"></div>

rotateInDownRight

Example

<div class=" rotateInDownRight scrollanimation animated"></div>

rotateInUpLeft

Example

<div class=" rotateInUpLeft scrollanimation animated"></div>

rotateInUpRight

Example

<div class=" rotateInUpRight scrollanimation animated"></div>

Bouncing Entrances

bounceIn

Example

<div class=" bounceIn scrollanimation animated"></div>

bounceInLeft

Example

<div class=" bounceInLeft scrollanimation animated"></div>

bounceInRight

Example

<div class=" bounceInRight scrollanimation animated"></div>

Fading Entrances

fadeIn

Example

<div class=" fadeIn scrollanimation animated"></div>

fadeInDown

Example

<div class=" fadeInDown scrollanimation animated"></div>

fadeInLeft

Example

<div class=" fadeInLeft scrollanimation animated"></div>

fadeInLeftBig

Example

<div class=" fadeInLeftBig scrollanimation animated"></div>

fadeInRight

Example

<div class=" fadeInRight scrollanimation animated"></div>

fadeInRightBig

Example

<div class=" fadeInRightBig scrollanimation animated"></div>

fadeInUp

Example

<div class=" fadeInUp scrollanimation animated"></div>

Flippers

flip

Example

<div class=" flip scrollanimation animated"></div>

flipInX

Example

<div class=" flipInX scrollanimation animated"></div>

flipInY

Example

<div class=" flipInY scrollanimation animated"></div>

Lightspeed

lightSpeedIn

Example

<div class=" lightSpeedIn scrollanimation animated"></div>

Attention Seekers

bounce

Example

<div class=" bounce scrollanimation animated"></div>

flash

Example

<div class=" flash scrollanimation animated"></div>

pulse

Example

<div class=" pulse scrollanimation animated"></div>

rubberBand

Example

<div class=" rubberBand scrollanimation animated"></div>

shake

Example

<div class=" shake scrollanimation animated"></div>

swing

Example

<div class=" swing scrollanimation animated"></div>

tada

Example

<div class=" tada scrollanimation animated"></div>

wobble

Example

<div class=" wobble scrollanimation animated"></div>

jello

Example

<div class=" jello scrollanimation animated"></div>

Specials

hinge

Example

<div class=" hinge scrollanimation animated"></div>

shake

Example

<div class=" shake scrollanimation animated"></div>

jackInTheBox

Example

<div class=" jackInTheBox scrollanimation animated"></div>

rollIn

Example

<div class=" rollIn scrollanimation animated"></div>