Checkpoint Demo

Basic

Fade Up
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Up</div>
$(".checkpoint").checkpoint();

Custom Position

Fade Up
<div class="checkpoint" data-checkpoint-offset="100" data-checkpoint-intersect="bottom-bottom" data-checkpoint-animation="fade-up">Fade Up</div>
$(".checkpoint").checkpoint();

Fade

Fade Up
Fade Down
Fade Left
Fade Right
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Up</div>
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Down</div>
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Left</div>
<div class="checkpoint" data-checkpoint-animation="fade-up">Fade Right</div>
$(".checkpoint").checkpoint();

Zoom In

Zoom In
Zoom In Up
Zoom In Down
Zoom In Left
Zoom In Right
<div class="checkpoint" data-checkpoint-animation="zoom-in">Zoom In</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-up">Zoom In Up</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-down">Zoom In Down</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-left">Zoom In Left</div>
<div class="checkpoint" data-checkpoint-animation="zoom-in-right">Zoom In Right</div>
$(".checkpoint").checkpoint();

Zoom Out

Zoom Out
Zoom Out Up
Zoom Out Down
Zoom Out Left
Zoom Out Right
<div class="checkpoint" data-checkpoint-animation="zoom-out">Zoom Out</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-up">Zoom Out Up</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-down">Zoom Out Down</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-left">Zoom Out Left</div>
<div class="checkpoint" data-checkpoint-animation="zoom-out-right">Zoom Out Right</div>
$(".checkpoint").checkpoint();

Flip

Flip Up
Flip Down
Flip Left
Flip Right
<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Up</div>
<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Down</div>
<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Left</div>
<div class="checkpoint" data-checkpoint-animation="flip-up">Flip Right</div>
$(".checkpoint").checkpoint();

Container

Fade Up
<div class="container">
	<div class="checkpoint" data-checkpoint-animation="flip-up" data-checkpoint-container=".container">Fade Up</div>
</div>

Parent

Fade Up
<div class="parent">
	<div class="checkpoint" data-checkpoint-animation="fade-up" data-checkpoint-parent=".parent">Fade Up</div>
</div>
$(".checkpoint").checkpoint();