First steps

There are two ways to set up YASL.
You can either collect multiple elements using jQuery or bind a single element to an individual YASL Stimulus controller.
Both methods are explained with examples below.

Setup YASL via jQuery

Collect elements using a jQuery selector.

$('.elements-to-collect')
	.yasl(
		callbackEntryFunction,
		optionsObject
	)
	.startView();

For more information on available functions, see the "Functions" page.
YASL automatically stops when the execCounter reaches 0 or when stopView() is called.

$('.elements-to-collect')
	.stopView();

The configuration can be updated by calling the function 'updateConfig'.

$('.elements-to-collect')
	.updateConfig( {threshold: 0.25, } );

Setup YASL via HTML

You can assign elements and perform the entire configuration using HTML attributes.

<div
	style="background-color: blue; width: 200px; height: 200px;"
	data-yasl
	data-yasl-animations="fade-move-top"
	data-yasl-revert="true"
	data-yasl-threshold="0.4"
	data-yasl-exec-counter="-1"
></div>

Call yaslObserve to collect all elements, including those that are added to the DOM later.

$(window).on('load', () => {
	yaslObserve();
});

Setup YASL via Yasl-Stimulus controller

To observe an element, add the attribute data-controller="yasl" to it.

<div
	data-controller="yasl"
	data-yasl-revert-value="true"
	data-yasl-animations-value="
		fade-move-in-turn-reveal-left-blur
	"
	data-yasl-animation-element-value="animationElement11"
	class="collect"
	style="
		--yasl-duration: 300ms;
		--yasl-delay: 100ms;
		--yasl-reveal: 70%;
		position: absolute;
		left: 50px;
		text-align: center;
		float: right;
	"
>

YASL can be fully configured using Stimulus value attributes.
For detailed configuration options and usage instructions, visit the YASL Stimulus controller page.