Troubleshooting
YASL offers several techniques for observing and animating elements.
Each of these techniques has its own advantages and limitations, which are discussed in this section.
We’ll also cover practical examples showing how to fix or handle common issues.
For live examples, visit the subpage "Troubleshooting Examples."
You may notice that animations appear to bounce when using the IntersectionObserver.
This happens when you scroll near the edge of the defined threshold.
The issue occurs because the IntersectionObserver reacts to both the layout layer and the visual layer.
When an animation changes the visual position of an element, the visual threshold also shifts, creating a feedback loop that causes continuous triggering.
There are two ways to resolve this issue:
1. (Recommended) Wrap the element in a div with the same dimensions. Attach YASL to this wrapper div and set the 'animationElement' option to the original element you want to animate.
This allows the original element to move visually without affecting the observed element’s position.
2. Set the 'disableObserver' option to true to use the fallback engine instead.
<div
data-controller="yasl"
data-yasl-revert-value="true"
data-yasl-animations-value="move-up"
data-yasl-animation-element-value="animationElement1"
class="collect"
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>In this example, we attach the wrapper element to YASL using data-controller="yasl" and specify the target element to animate with data-yasl-animation-element-value="animationElement1".
The reasons for this can vary, but it most commonly occurs due to pinch zooming.
Pinch zooming refers to zooming using a trackpad or a mobile touchscreen (for example, spreading two fingers apart), and is different from regular zooming (such as using CMD and +).
Unlike traditional browser zoom, pinch zooming does not change the layout—only the visual magnification. As a result, the fallback engine may not be able to accurately track the current state.
That being said, there is currently no workaround for this behavior other than using the IntersectionObserver.
But in most cases the fallback engine should be able to handle pinch zooming.