SEAL

Scroll Effect Animation Library

Scroll down

Slide

<div class="yb-seal yb-seal-slide-left"></div>
<div class="yb-seal yb-seal-slide-right"></div>
<div class="yb-seal yb-seal-slide-up"></div>
<div class="yb-seal yb-seal-slide-down"></div>

Zoom

<div class="yb-seal yb-seal-zoom-in"></div>
<div class="yb-seal yb-seal-zoom-out"></div>

Flip

<div class="yb-seal yb-seal-flip-left"></div>
<div class="yb-seal yb-seal-flip-right"></div>
<div class="yb-seal yb-seal-flip-up"></div>
<div class="yb-seal yb-seal-flip-down"></div>

Slide with duration (in seconds)

<div class="yb-seal yb-seal-slide-left"
yb-seal-duration="1">
</div>
<div class="yb-seal yb-seal-slide-right"
yb-seal-duration="2">
</div>
<div class="yb-seal yb-seal-slide-up"
yb-seal-duration="3">
</div>
<div class="yb-seal yb-seal-slide-down"
yb-seal-duration="4">
</div>

Zoom with duration (in seconds)

<div class="yb-seal yb-seal-zoom-in"
yb-seal-duration="2">
</div>
<div class="yb-seal yb-seal-zoom-out"
yb-seal-duration="3">
</div>

Flip with duration (in seconds)

<div class="yb-seal yb-seal-flip-left"
yb-seal-duration="1">
</div>
<div class="yb-seal yb-seal-flip-right"
yb-seal-duration="2">
</div>
<div class="yb-seal yb-seal-flip-up"
yb-seal-duration="3">
</div>
<div class="yb-seal yb-seal-flip-down"
yb-seal-duration="4">
</div>

Slide with delay (in seconds)

<div class="yb-seal yb-seal-slide-left"
yb-seal-delay="1">
</div>
<div class="yb-seal yb-seal-slide-right"
yb-seal-delay="2">
</div>
<div class="yb-seal yb-seal-slide-up"
yb-seal-delay="3">
</div>
<div class="yb-seal yb-seal-slide-down"
yb-seal-delay="4">
</div>

Zoom with delay (in seconds)

<div class="yb-seal yb-seal-zoom-in"
yb-seal-delay="1">
</div>
<div class="yb-seal yb-seal-zoom-out"
yb-seal-delay="2">
</div>

Flip with delay (in seconds)

<div class="yb-seal yb-seal-flip-left"
yb-seal-delay="1">
</div>
<div class="yb-seal yb-seal-flip-right"
yb-seal-delay="2">
</div>
<div class="yb-seal yb-seal-flip-up"
yb-seal-delay="3">
</div>
<div class="yb-seal yb-seal-flip-down"
yb-seal-delay="4">
</div>

Transition Timing functions
(Hover on any of them below to see the transition)

<div class="yb-seal"
yb-seal-timing="ease"
yb-seal-timing-width="500">
</div>
<div class="yb-seal"
yb-seal-timing="ease-in"
yb-seal-timing-width="500">
</div>
<div class="yb-seal"
yb-seal-timing="ease-out"
yb-seal-timing-width="500">
</div>
<div class="yb-seal"
yb-seal-timing="ease-in-out"
yb-seal-timing-width="500">
</div>
<div class="yb-seal"
yb-seal-timing="linear"
yb-seal-timing-width="500">
</div>