ESL Animate & ESL Animate Service

esl-animate is a module that provides service and its DOM API to animate elements on their intersection with the viewport

The module consists of JS API ESLAnimateService, Custom element ESLAnimate, and Mixin element ESLAnimateMixin. ESLAnimateService is a core of the esl-animate module. Element needs to be observed by ESLAnimateService in order to be animated.

Module Features:

ESLAnimateService

ESLAnimateService provides a way to asynchronously add animation on the intersection of a target element with a viewport. It is based on Intersection Observer Api and serves as a core functionality for ESLAnimate and ESLAnimateMixin elements.

Service static and instance API:

You can also create a separate (from global) ESLAnimateService instance by calling its constructor.

Configuration API: ESLAnimateConfig

ESLAnimate custom element

ESLAnimate is a custom element that subscribes ESLAnimateService to elements from html.

To use ESLAnimate you need to include the following code:

  ESLAnimate.register();

ESLAnimate Attributes | Properties:

By default, attributes group, repeat, and target are observed, meaning the animation sequence will restart once theese attributes are changed. Additionally, you can do the re-animation manually by calling the instance method reanimate().

Use cases

<esl-animate target="::next::child(li)"></esl-animate>
<ul>
    <li class="esl-animate-fade">...</li>
    <li class="esl-animate-fade">...</li>
    ...
</ul>

Note: <esl-animate> hidden (display: none) by default when there is no content inside

<esl-animate class="esl-animate-fade" cls="in">
    ...HTML Content...
</esl-animate>

ESLAnimateMixin

ESLAnimateMixin is an ESL mixin attribute that automatically subscribes ESLAnimateService to the element from html.

To use ESLAnimateMixin you need to include the following code:

  ESLAnimateMixin.register();

ESLAnimateMixin Attributes | Properties:

Apart from ESLAnimate module mixin doesn't observe any of the element attributes. But you can do the re-animation manually by calling instance method reanimate().

Use cases

<div esl-animate>...HTML Content...</div>
<div esl-animate="{repeat: true, ratio: 0.2, cls: 'in'}">...HTML Content...</div>