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 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 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();