Supported custom properties:
- --sal-duration
- --sal-delay
- --sal-easing

Remember, that you can use only data attributes (e.g. data-sal-delay) or CSS custom properties (e.g. --sal-delay). Data attributes have precedence over CSS custom properties.

$3

By default every animation is played once. You can change it by setting once option to false (see Options). What's more, it's possible to override this option for an animated element by adding one of the following attributes:
- data-sal-repeat - forces animation replay
- data-sal-once - plays animation once

Options

| Property | Type | Description | Default |
|---------------------------|-------------|---------------|---------|
| threshold | Number | Percentage of an element's area that needs to be visible to launch animation (see docs) | 0.5 |
| once | Boolean | Defines if animation needs to be launched once. Can be overridden, see Repeating Animation. | true |
| disabled | Boolean or Function | Flag (or a function returning boolean) for disabling animations | false |

You can set options during Sal's initialization, e.g.:

`js
sal({
threshold: 1,
once: false,
});
`

$3

| Property | Type | Description | Default |
|---------------------------|-------------|---------------|---------|
| root | Element or null | The element that is used as the viewport for checking visibility of the target (see docs) | window |
| selector | String | Selector of the elements to be animated | [data-sal] |
| animateClassName | String | Class name which triggers animation | sal-animate |
| disabledClassName | String | Class name which defines the disabled state | sal-disabled |
| rootMargin | String | Corresponds to root's bounding box margin (see docs) | 0% 50% |
| enterEventName | String | Enter event name (see Events) | sal:in |
| exitEventName | String | Exit event name (see Events) | sal:out |

API

| Method name | Description |
|---------------------------|-------------|
| enable | Enables animations |
| disable | Disables animations |
| reset | Resets instance and allows to pass new options (see Options) |
| update | Updates observer with new elements to animated. Useful for dynamically injected HTML. |

Public methods are available after Sal's initialization:

`js
const scrollAnimations = sal();

scrollAnimations.disable();
`

$3

If you want to change Sal's options once it's been initialized, you should use reset method, that allows you to pass new set of options. It can be useful, when you would like to provide different options for specific viewport sizes.

`js
const scrollAnimations = sal();

// Provide new options
scrollAnimations.reset({
selector: 'animated-element',
once: true,
});
`

Events

This library supports events, fired when element is entering or exiting viewport (they are named sal:in and sal:out by default). Property detail is IntersectionObserverEntry object.


You can attach listener to specific element.

`js
// Get element with ".animated" class, which has "data-sal" attribute
const element = document.querySelector('.animated');

element.addEventListener('sal:in', ({ detail }) => {
console.log('entering', detail.target);
});
`

or to the whole document

`js
document.addEventListener('sal:out', ({ detail }) => {
console.log('exiting', detail.target);
});
`

Note: This library uses Custom Event to trigger events on animated elements. Check the compatibility table to know if your browser supports it and use a polyfill if needed.

Misc

$3

If you aim to support users that don't allow sites to use JavaScript, you should consider disabling animations' styles in the first place. You can use

`html

``

License

Created by Mirek Ciastek. Released under the MIT License.