Animations

Scroll down to get to the animations

Fade animation

Settings: animation: fade; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="fade"
        data-yasl-animation-element="#animationElement1"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement1" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Move left animation

Settings: animation: move-left; distance: 50; unit: 'px'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="move-left"
        data-yasl-animation-element="#animationElement2"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement2" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Move Top animation

Settings: animation: move-top; distance: 50; unit: 'px'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="move-top"
        data-yasl-animation-element="#animationElement3"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement3" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

In animation

Settings: animation: in; scaleBoundMin: 0.7; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="in"
        data-yasl-animation-element="#animationElement4"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement4" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Out animation

Settings: animation: in; scaleBoundMax: 1.3; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="out"
        data-yasl-animation-element="#animationElement5"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement5" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Turn right animation

Settings: animation: turn; direction: 'right'; deg: 89; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="turn-right"
        data-yasl-animation-element="#animationElement6"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement6" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Turn bottom animation

Settings: animation: turn; direction: 'bottom'; deg: 89; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="turn-bottom"
        data-yasl-animation-element="#animationElement7"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement7" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Reveal left animation

Settings: animation: reveal; direction: 'left'; revealLength: 70; revealUnit: '%'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="reveal-left"
        data-yasl-animation-element="#animationElement8"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement8" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Reveal top animation

Settings: animation: reveal; direction: 'top'; revealLength: 70; revealUnit: '%'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="reveal-top"
        data-yasl-animation-element="#animationElement9"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement9" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Blur animation

Settings: animation: blur; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="blur"
        data-yasl-animation-element="#animationElement10"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement10" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

All together

Settings: animation: fade, move, in, turn, reveal, blur; Standard config as above.

Method: CSS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-revert="true"
        data-yasl-animations="fade-move-in-turn-reveal-left-blur"
        data-yasl-animation-element="#animationElement11"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement11" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

All together with fallback engine and JS animations

Settings: animation: fade, move, in, turn, reveal, blur; disableObserver: true; css: ''; deg: 89; duration: 300ms; Standard config as above.

Method: JS

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-threshold="0.5"
        data-yasl-axis="both"
        data-yasl-deg="89"
        data-yasl-duration="300"
        data-yasl-fallback="true"
        data-yasl-css=""
        data-yasl-revert="true"
        data-yasl-animations="fade-move-in-turn-reveal-left-blur"
        data-yasl-animation-element="#animationElement12"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement12" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>

Progressive Demo

All together with fallback engine, JS animations amd progressive play

Settings: threshold: 0.01, progressive: true, throttle: 20, animation: fade, move, in, turn, reveal, blur; disableObserver: true; css: ''; deg: 89; duration: 300ms; Standard config as above.

Method: JS

Tip: Set throttle and threshold to a lower value to smooth the progressive animations

<div style="border: 3px solid white; position: relative; height: 200px; width: 300px;">
    <div style="width: 100%; height: 3px; background-color: white; position: absolute; top: 50%;"></div>
    <div
        data-yasl
        data-yasl-exec-counter="-1"
        data-yasl-threshold="0.01"
        data-yasl-axis="y"
        data-yasl-progressive="true"
        data-yasl-deg="89"
        data-yasl-throttle="20"
        data-yasl-fallback="true"
        data-yasl-css=""
        data-yasl-revert="true"
        data-yasl-animations="fade-move-in-turn-reveal-left-blur"
        data-yasl-animation-element="#animationElement13"
        style="
            --yasl-duration: 300ms; --yasl-delay: 100ms; --yasl-reveal: 70%;
            position: absolute; left: 50px; text-align: center; float: right;
        "
    >
        <div id="animationElement13" style="width: 200px; height: 200px; background-color: blue;"></div>
    </div>
</div>