Viewport Animate JS

Viewport Animate JS - Documentation

To use Viewport Animate JS, simply:

Install and reference jQuery Viewport Checker and Animate.CSS in your website.
Install and reference viewport-animate.js in your website.
Add any of the Viewport Animate (VPA) Classes from the table (below) to any elements on your website to trigger its matching Animate.CSS Class with jQuery Viewport Checker.
That's it!

VPA Class	Animate.CSS Class
.vpa-bounce	bounce
.vpa-flash	flash
.vpa-pulse	pulse
.vpa-rubber-band	rubberBand
.vpa-shake	shake
.vpa-swing	swing
.vpa-tada	tada
.vpa-wobble	wobble
.vpa-jello	jello
.bounce-in	bounceIn
.bounce-in-left	bounceInLeft
.bounce-in-right	bounceInRight
.bounce-in-down	bounceInDown
.bounce-in-up	bounceInUp
.bounce-out	bounceOut
.bounce-out-left	bounceOutLeft
.bounce-out-right	bounceOutRight
.bounce-out-down	bounceOutDown
.bounce-out-up	bounceOutUp
.fade-in	fadeIn
.fade-in-left	fadeInLeft
.fade-in-right	fadeInRight
.fade-in-up	fadeInUp
.fade-in-down	fadeInDown
.fade-in-left-big	fadeInLeftBig
.fade-in-right-big	fadeInRightBig
.fade-in-down-big	fadeInDownBig
.fade-in-up-big	fadeInUpBig
.fade-out	fadeOut
.fade-out-left	fadeOutLeft
.fade-out-right	fadeOutRight
.fade-out-up	fadeOutUp
.fade-out-down	fadeOutDown
.fade-out-left-big	fadeOutLeftBig
.fade-out-right-big	fadeOutRightBig
.fade-out-down-big	fadeOutDownBig
.fade-out-up-big	fadeOutUpBig
.vpa-flip	flip
.flip-in-x	flipInX
.flip-in-y	flipInY
.flip-out-x	flipOutX
.flip-out-y	flipOutY
.light-speed-in	lightSpeedIn
.light-speed-out	lightSpeedOut
.rotate-in	rotateIn
.rotate-in-down-left	rotateInDownLeft
.rotate-in-down-right	rotateInDownRight
.rotate-in-up-left	rotateInUpLeft
.rotate-in-up-right	rotateInUpRight
.rotate-out	rotateOut
.rotate-out-down-left	rotateOutDownLeft
.rotate-out-down-right	rotateOutDownRight
.rotate-out-up-left	rotateOutUpLeft
.rotate-out-up-right	rotateOutUpRight
.slide-in-left	slideInLeft
.slide-in-right	slideInRight
.slide-in-down	slideInDown
.slide-in-up	slideInUp
.slide-out-left	slideOutLeft
.slide-out-right	slideOutRight
.slide-out-down	slideOutDown
.slide-out-up	slideOutUp
.zoom-in	zoomIn
.zoom-in-left	zoomInLeft
.zoom-in-right	zoomInRight
.zoom-in-down	zoomInDown
.zoom-in-up	zoomInUp
.zoom-out	zoomOut
.zoom-out-left	zoomOutLeft
.zoom-out-right	zoomOutRight
.zoom-out-down	zoomOutDown
.zoom-out-up	zoomOutUp
.vpa-hinge	hinge
.roll-in	rollIn
.roll-out	rollOut
.jack-in-the-box	jackInTheBox

by Alexander Burton

jQuery Viewport Checker + Animate.CSS

Use them together with one lightweight extension!

Viewport Animate creates ready-to-use HTML classes that connect each CSS animation from Animate.CSS to jQuery Viewport Checker.

Viewport Animate JS - Documentation

To use Viewport Animate JS, simply:

Install and reference jQuery Viewport Checker and Animate.CSS in your website.

Install and reference viewport-animate.js in your website.

Add any of the Viewport Animate (VPA) Classes from the table (below) to any elements on your website to trigger its matching Animate.CSS Class with jQuery Viewport Checker.

That's it!