This section handles all available HTML attributes.
Refer the Easy Documentation if you are using the stimulus controller.
Type: list of keywords separated by -
Names of the animations to play when the element is in view.
One or more of: 'fade', 'move', 'in', 'out', 'turn', 'left', 'right', 'top', 'bottom', 'blur', 'reveal'
Animation names must be separated by a '-'.
E.g.: fade-move-in-left
Fade: Fading changes the opacity of the element.
Move: Translates the element, must be combined with 'left', 'right', 'top' or 'bottom'. Default is 'left'.
In/Out: Scales the element in or out.
Turn: Rotates the element, must be combined with 'left', 'right', 'top' or 'bottom'. Default is 'left'.
Reveal: Reveals the element, must be combined with 'left', 'right', 'top' or 'bottom'. Default is 'left'.
Blur: Blur effect on the element.
<div data-yasl data-yasl-animations="fade-move-left"></div>Type: CSS-Selector
The element to animate.
The observed element is used if this setting is not configured separately.
This is important if you want to use the IntersectionObserver without bugs.
More information about that are found on the trouble shooting page.
<div data-yasl data-yasl-animation-element="#idOfTheElementToAnimate"></div>Type: "true" or "false"
This will enable a recalculation of the element's current position in the viewport.
This could be handy if new elements are added above or other elements change in dimensions and
you are unable to call the function 'yaslRecalculateInstance' or 'yaslRecalculateAllInstances'.
IMPORTANT: Be careful as a recalculation of many elements at the same consumes a lot of performance.
Type: Keyword
Which axis to observe: 'y', 'x', or 'both'. Default: 'y'.
As vertical scroll is most common you can keep this setting to 'y' to save unnecessary computations.
Type: "true" or "false"
If true an blur effect will be played when the element is in view.
Type: Number
Blur radius for blur effect. If unset, uses full element width/height. Default: 0.
Type: "true" or "false"
The function set with callbackExit will be called when YASL is stopped no matter if the element is in view or not.
Type: Comma-separated list
Custom or predefined CSS class for CSS-based animation instead of JS.
Use 'Default' to access built-in CSS animations. If set, JS animations are ignored, if empty JS animations are activated.
You can add custom CSS classes, separated by a comma.
Your custom CSS should listen to the class 'yasl-animate' to start or stop the animations.
<div data-yasl data-yasl-css="my-class-1, my-class-2, my-class-3"></div><div data-yasl data-yasl-css="Default"></div> <!--Default tells YASL to make use of the default animations declared in the 'data-yasl-animations' attribute.-->Type: JSON String
Custom JavaScript-defined CSS property-sets for start/end states.
Do not use together with built-in animations changing the same properties.
The object must contain the two keys 'start' and ‘end’, start holds the initial values while end has the final. Other keys are ignored.
Start and end are objects themselves. Both should mirror the values to change.
The values must be supported by jQuery's 'animate' function with the exception of colors as YASL handles color changes itself.
Beware about things like 'margin', as margin does change the element on the positional layer and thus the position where YASL will trigger, this is of course
not a bug but intended. More information can be found on the page 'Troubleshooting'.
<div data-yasl data-yasl-custom-js="{"start":{"color":"#000","left":0},"end":{"color":"#fff","left":"25%"}}"></div>Type: Number
Value for rotation degree. Default: 45.
Type: Keyword
Direction for translations and rotations.
Used by 'move', 'rotate', and 'reveal'.
One of: 'left', 'right', 'top', 'bottom'. Default: 'left'.
Type: "true" or "false"
If you want to disable the IntersectionObserver you can do so by setting this option to true.
In this case YASL will always use the fallback engine.
Visit the page 'Troubleshooting' for more information when it might be useful to do this.
Type: Number
Movement distance value for translation. Default: 50.
Please note that this defines only the value, the corresponding unit must be set with the 'unit' setting.
This means: If 'distance' is 50 and 'unit' is 'px' the translation will be done with 50px.
If 'distance' is 25 and 'unit' is '%' the translation will be done with 25%.
<div data-yasl data-yasl-distance="4" data-yasl-move-unit="rem"></div>Type: Number
Duration of animations in ms. Not used in 'progressive' mode. Default: 300.
Type: Keyword
The easing equation.
One of: 'swing', 'linear'. Default: 'swing'
Type: JSON string
Options passed to the entry callback or the the dispatched entry event.
<div data-yasl data-yasl-entry-options="{"entryOptions":{"backgroundColor":"black","color":"white"}}"></div>Type: String
Name of the event fired when the element enters the viewport.
Default: 'yasl:enter'
Type: Number
Maximum number of times the entry and exit callbacks fire. Decrements by 1 on every trigger.
Stops at zero. Set to -1 for no limit. Default: 1
Important: If the element goes out of view does not decrease the counter. When the counter hits zero the observation is stopped immediately and the last exit does not trigger.
Important: If progressive mode is active, YASL sets execCounter to -1 (unlimited executions).
Type: JSON string
This object is passed to the exit function and to the dispatched exit event.
For further details see 'entryOptions'.
Type: String
Name of the event fired when the element leaves the viewport.
Default: 'yasl:leave'
Type: "true" or "false"
Enables opacity fade animation if true. Default: false.
Can either be set directly or by adding 'fade' to the 'animation' setting.
Type: String
An optional identifier which can be set and changed anytime.
Type: "true" or "false"
Enables translation if true. Default: false.
Can either be set directly with this option or by adding 'move' to the 'data-yasl-animations' attribute.
Type: String
Unit string for translation (e.g., 'px', '%').
Default: 'px'.
Type: CSS-Selector
Set the parent if the element is in a separated scroll view.
Default: window
YASL's fallback engine supports a one two dimensional observation, like if the element is a child of a scrollable container and the window itself is scrollable as well.
The IntersectionObserver is required if there are more dimensions.
Important: YASL does detect if the element is nested, set this option to tell YASL so.
<body class="very-high-body">
…
<div id="container-with-many-content-to-scroll">
…
<div id="element-observed-by-yasl"></div> //This is supported by the fallback engine
</div>
</body>____________________
<body class="very-high-body">
…
<div id="container-with-many-content-to-scroll">
…
<div id="another-container-with-many-content-to-scroll">
…
<div id="element-observed-by-yasl"></div> //This is not supported by the fallback engine but by the IntersectionObserver
</div>
</div>
</body>
____________________
<div data-yasl data-yasl-parent="#container-with-many-content-to-scroll"></div>Type: "true" or "false"
Plays the animations progressive relative to the current ratio while scrolling. Default: false.
Attention: Does have impact on performance, do not use this on too many elements.
Important: If progressive mode is active, YASL sets execCounter to -1 (unlimited executions).
Type: "true" or "false"
Enables reveal effect (via clip-path) if true. Default: false.
Can either be set directly with this option or by adding 'reveal' to the 'animation' setting.
<div
data-yasl
data-yasl-reveal="true"
data-yasl-reveal-length="30"
data-yasl-reveal-unit="px"
data-yasl-direction="bottom"
></div>Type: Number
Distance for starting the reveal effect. Uses direction and revealUnit. Default: 0.
Type: String
CSS unit for revealLength (e.g., 'px', '%'). Defaults to config's moveUnit if not set.
Type: "true" or "false"
If true, animation reverses when element leaves viewport.
Default: false.
Type: String
Custom rootMargin for the IntersectionObserver.
Only used if IntersectionObserver is active.
Default: ''.
For further information about the rootMargin read the MDN docs about the IntersectionObserver:
https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin
If this option is not set the rootMargin for the observer will be set up to the set axis.
The settings are:
Axis Y: '0% 100% 0% 100%'
Axis X: '100% 0% 100% 0%'
Axis BOTH: '0% 0% 0% 0%'
Type: "true" or "false"
Enables rotation if true.
Default: false.
Can either be set directly with this option or by adding 'turn' to the 'data-yasl-animations' attribute.
<div data-yasl data-yasl-rotate="true" data-yasl-deg="75"></div>Type: Keyword
Scale direction for 'in' (grow) or 'out' (shrink). Empty string disables scaling.
Default: ''.
Can either be set directly with this option or by adding 'in' or 'out' to the 'data-yasl-animations' attribute.
<div
data-yasl
data-yasl-scale="in"
data-yasl-scale-bound-max="1.25"
data-yasl-scale-bound-min="0.8"
></div>Type: Number
Upper scaling bound (growing). Default 1.3
Type: Number
Lower scaling bound (shrinking). Default .7
Type: Number
The 'threshold' setting must be a value between 0.01 (1%) and 0.99 (99%).
This tells YASL how much of the element must be visible in the viewport before firing a callback or event or to play any animations.
Important: If the axis is set to 'y' or 'x' only width or height matters, if axis is set to 'both' also both, the height and width is considered.
See the difference in the live examples for better understanding.
Type: Number
Delay in ms for throttling fallback scroll listener.
Default: 50.
Does not have an impact if the IntersectionObserver is active.
Important: The lower the value the smoother are the detection or animations in combination with 'progressive' but the heavier the performance.