Sal (Scroll Animation Library), a performance-focused, lightweight scroll animation library written in vanilla JavaScript. It has no dependencies and is very lightweight, weighing less than 2.8 kb.

Functionalities:

Core Performance and Mechanism

• Performance: Sal was created to provide a performant solution for animating elements on scroll.

• Underlying Technology: It is based on the Intersection Observer API, which provides exceptional performance in checking an element's presence in the viewport.

• Initialization: Animations are triggered by initializing Sal with sal() in a script file. The library automatically looks for all elements containing a data-sal attribute and launches their animations when they enter the viewport.

Animation and Customization

• Animation Types: Sal supports several predefined animations:

  • fade

  • slide-up, slide-down, slide-left, slide-right

  • zoom-in, zoom-out

  • flip-up, flip-down, flip-left, flip-right

• Data Attribute Customization: Animation options can be customized for specific elements using data attributes:

  • data-sal-duration: changes the animation duration (ranging from 200 to 2000 ms).

  • data-sal-delay: adds a delay to the animation (ranging from 5 to 1000 ms).

  • data-sal-easing: sets the easing function for the animation.

• CSS Variable Customization: Users can also customize duration, delay, and easing using CSS variables (custom properties), such as --sal-duration, --sal-delay, and --sal-easing, allowing them to set any desired value. Data attributes take precedence over CSS custom properties.

• Repeating Animations: By default, animations play once (once option set to true). This can be overridden globally during initialization, or individually for elements using data-sal-repeat (forces replay) or data-sal-once (plays once) attributes.

Configuration Options

During initialization, Sal allows users to configure options:

• threshold: Defines the percentage of an element's area that must be visible to launch the animation (Default: 0.5).

• once: A Boolean defining if the animation is launched only once (Default: true).

• disabled: A Boolean flag or a function returning a Boolean used for disabling animations (Default: false).

• Advanced Options: These include setting the root element (Default: window), specifying a custom element selector (Default: [data-sal]), and defining rootMargin (Default: 0% 50%).

Public API Methods

Once Sal is initialized, public methods are available to manage the animations:

• enable: Activates animations.

• disable: Deactivates animations.

• reset: Resets the instance and allows passing a new set of options, useful for providing different options for specific viewport sizes.

• update: Updates the observer to recognize new elements that need to be animated, which is useful for dynamically injected HTML.

Events and Compatibility

• Events: Sal fires custom events when an element is entering the viewport (sal:in) or exiting the viewport (sal:out). Listeners can be attached to a specific element or the entire document.

• No-JS Support: The library provides methods to support users who have disabled JavaScript by suggesting the use of the <noscript /> element to inject CSS that disables the animation styles.

• License: Sal is an open-source project released under the MIT License.