Entrance Animations

Bring elements into view with fade, slide, scale, zoom, flip, and drop-in effects.

Fade In

<div class="velin-animate-fade-in">Fades in</div>
<div class="velin-animate-fade-in-up">Fades in from below</div>
<div class="velin-animate-fade-in-down">Fades in from above</div>
<div class="velin-animate-fade-in-left">Fades in from left</div>
<div class="velin-animate-fade-in-right">Fades in from right</div>

Slide

<div class="velin-animate-slide-up">Slides up</div>
<div class="velin-animate-slide-down">Slides down</div>
<div class="velin-animate-slide-left">Slides left</div>
<div class="velin-animate-slide-right">Slides right</div>

Scale & Zoom

<div class="velin-animate-scale-in">Scale from 0 to 1</div>
<div class="velin-animate-zoom-in">Zoom in from 50% scale</div>

Flip & Drop

<div class="velin-animate-flip-x">Flip on X axis</div>
<div class="velin-animate-flip-y">Flip on Y axis</div>
<div class="velin-animate-drop-in">Drop in from above with bounce</div>