Fade

<div data-sal="sal-up"></div>
<div data-sal="sal-down"></div>
<div data-sal="slide-right"></div>
<div data-sal="slide-left"></div>
<div data-sal="sal-up-right"></div>
<div data-sal="sal-up-left"></div>
<div data-sal="sal-down-right"></div>
<div data-sal="sal-down-left"></div>

Flip

<div data-sal="flip-left"></div>
<div data-sal="flip-right"></div>
<div data-sal="flip-up"></div>
<div data-sal="flip-down"></div>

Zoom

<div data-sal="zoom-in"></div>
<div data-sal="zoom-in-up"></div>
<div data-sal="zoom-in-down"></div>
<div data-sal="zoom-in-left"></div>
<div data-sal="zoom-in-right"></div>
<div data-sal="zoom-out"></div>
<div data-sal="zoom-out-up"></div>
<div data-sal="zoom-out-down"></div>
<div data-sal="zoom-out-right"></div>
<div data-sal="zoom-out-left"></div>

Different settings examples

<div data-sal="sal-up"
     data-sal-duration="3000">
</div>
<div data-sal="sal-down"
     data-sal-easing="linear"
     data-sal-duration="1500">
</div>
<div data-sal="slide-right"
     data-sal-offset="300"
     data-sal-easing="ease-in-sine">
</div>
<div data-sal="slide-left"
     data-sal-anchor="#example-anchor"
     data-sal-offset="500"
     data-sal-duration="500">
</div>
<div data-sal="sal-zoom-in"
     data-sal-easing="ease-in-back"
     data-sal-delay="300"
     data-sal-offset="0">
</div>
<div data-sal="flip-left"
     data-sal-easing="ease-out-cubic"
     data-sal-duration="2000">
</div>

Anchor placement

<div data-sal="sal-up"
     data-sal-anchor-placement="top-bottom">
</div>
<div data-sal="sal-up"
     data-sal-anchor-placement="center-bottom">
</div>
<div data-sal="sal-up"
     data-sal-anchor-placement="bottom-bottom">
</div>
<div data-sal="sal-up"
     data-sal-anchor-placement="top-center">
</div>
<div data-sal="sal-up"
     data-sal-anchor-placement="center-center">
</div>
<div data-sal="sal-up"
     data-sal-anchor-placement="bottom-center">
</div>