YASL related functions

There are several functions discussed here.  
Please note that internal functions are not included in this list.

Functions

yasl
startView
stopView
updateConfig
yaslIsStandardAttribute
yaslObserve
yaslUnobserve
yaslGetInstanceByUuid
yaslGetInstanceByElement
yaslGetInstance
yaslStopInstance
yaslRemoveInstance
yaslRecalculateInstance
yaslRecalculateAllInstances
yaslGetConfig

yasl

Initializes YASL on matched elements.

Parameters:

callbackEntry {Function} - Called when element enters viewport.

config {Object} - Configuration options.

Example:

const hi = function () {

	console.log('hi');

}

$('.elements-to-observe').yasl(hi, { threshold: 0.75, duration: 500, });

startView

Starts the scroll observer for each element

Example:

$('.elements-to-observe').yasl(null).startView();

stopView

Stops the scroll observer for each element.

Example:

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

updateConfig

Updates the configuration for existing instances.

Example:

$('.elements-to-observe').updateConfig({ fade: false, throttle: 25, });

yaslIsStandardAttribute

Returns whether a given attribute name is recognized as a valid YASL configuration attribute.

Example:

yaslIsStandardAttribute('data-yasl-css') // returns true

yaslIsStandardAttribute('data-yasl-threshold') // returns true

yaslIsStandardAttribute('data-some-attr') // returns false

yaslIsStandardAttribute('data-another-attr') // returns false

yaslObserve

Starts observing the document for nodes added or removed that have the [data-yasl] attribute.

It also initializes all currently existing elements with the [data-yasl] attribute.

Example:

<div data-yasl id="one-element-to-observe"></div>

<div data-yasl id="another-element-to-observe"></div>
yaslObserve(); //Starts observing "one-element-to-observe" and "another-element-to-observe".
<div data-yasl id="yet-another-element-to-observe"></div> //Automatically starts observing this element even after yaslObserve has been called before.

yaslUnobserve

Stops the global observer.

Parameters:

- stopAllInstances (boolean): If true, stops all YASL observations and removes them from the global array. Default is false.

yaslGetInstanceByUuid

Returns the YASL instance (JavaScript object) corresponding to the given UUID.

The UUID is stored in the data-yasl attribute of the observed element.

Parameters:

- uuid (string): The UUID of the YASL instance to retrieve.

Example:

const instance = yaslGetInstanceByUuid('40b52c51-f02e-05b5-1a7e-da25adbd23ea');

yaslGetInstanceByElement

Finds the YASL instance (JavaScript object) associated with a given element node.

IMPORTANT: The instance is referenced by the observed element, not by the animated element.

Example:

<div data-yasl id="observed-element"></div>
const element = document.getElementById('observed-element');

const yaslInstance = yaslGetInstanceByElement(element);

yaslGetInstance

Retrieves the YASL instance associated with the given HTML element or UUID.

IMPORTANT: The instance is referenced by the observed element, not by the animated element.

Parameters:

- instance (HTMLElement|string): The HTML element or a string UUID identifying the instance.

Returns:

(Object|null): The associated YASL instance object if found, or null.

Example:

<div data-yasl id="observed-element"></div>
const element = document.getElementById('observed-element');

const yaslInstance = yaslGetInstance(element);

const yaslInstance2 = yaslGetInstance('40b52c51-f02e-05b5-1a7e-da25adbd23ea');

yaslStopInstance

Stops a single YASL instance.

Parameters:

- instance: The observed element to stop, specified either as an HTMLElement or as the UUID string. Note that the instance itself (the object) should not be passed directly.

yaslRemoveInstance

Completely removes a YASL instance and clears all related data and attributes.

Parameters:

- instance: The YASL instance (JavaScript object) to be removed.

yaslRecalculateInstance

Call this function if your page layout changes and the observed element's position within the viewport has changed.

To optimize performance, YASL only determines element positions during initialization.

If your layout changes often and you cannot reliably detect these changes, you can enable the 'autoRecalc' option.

However, note that enabling this option may result in poor performance.

Parameters:

- instance: The YASL instance (JavaScript object or HTMLElement) to recalc the position of.

yaslRecalculateAllInstances

Same as 'yaslRecalculateInstance' but for all instances.

yaslGetConfig

Returns a single setting or the full configuration object for the given instance.

Parameters:

- instance (HTMLElement|string): The HTML element or UUID associated with the instance.

- config (string, default: ''): The name of the single setting to retrieve, or empty to fetch all settings.

Returns:

(any|Object|null): The requested setting value, the full configuration object, or null if not found.