Troubleshooting Examples

Scroll down to get to the examples

Fade animation

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

Method: CSS

Scroll to the middle line of the next example and observe how the element starts bouncing.

This occurs because the IntersectionObserver tracks not only the layout layer

but also the visual layer.

Find an example below that demonstrates how to fix this issue.

Example code:

<div
    data-controller="yasl"
    data-yasl-revert-value="true"
    data-yasl-animations-value="move-top"
    class="collect"
    style="
        --yasl-duration: 300ms;
        --yasl-delay: 100ms;
        --yasl-reveal: 70%;
        position: absolute;
        left: 50px;
        text-align: center;
        float: right;
        width: 200px;
        height: 200px;
        background-color: blue;
    "
></div>

Fade animation

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

Method: CSS

The issue shown in the previous example has been fixed by wrapping the element

in a div with the same dimensions. We now simply attach the observer to the

wrapper and instruct YASL to animate the original element instead.

Example code:

<div
    data-controller="yasl"
    data-yasl-animation-element-value="animationElement11"
    data-yasl-revert-value="true"
    data-yasl-animations-value="move-top"
    class="collect"
    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>