esl Exadel Smart Library
  • Core
  • Components
  • Examples
Get started
Exadel Smart Library
  • Search
  • Introduction
    • Installation Guide
    • Browser Support
    • Our Roadmap
  • Core
    • ESL Base Element
    • new ESL Mixin Element
    • ESL Media Query
    • ESL Traversing Query
    • new ESL Event Listeners
    • ESL Utils
  • Components
    • beta ESL A11y Group
    • ESL Alert
    • beta ESL Animate
    • beta ESL Footnotes
    • ESL Image
    • ESL Media
    • ESL Panel
    • ESL Panel Group
    • beta ESL Popup
    • ESL Scrollbar
    • beta ESL Select
    • beta ESL Select List
    • ESL Tabs
    • ESL Toggleable
    • ESL Trigger
  • Examples
    • Accordion
    • beta Animate
    • Embedded Audio
    • Embedded Video
    • beta Footnotes
    • Image
    • Menu
    • Notification
    • beta Popup
    • Scrollbar
    • beta Select Dropdown
    • beta Select List
    • Tabs
    • Toggleable

ESL Animate & ESL Animate Service Beta

Related Examples

  • Animate

ESLAnimate is a module to animate items on viewport intersecting.

Features:

  • Add class(es) when observed elements enter viewport area
  • Support group animation that allows item delay its animation on the passed time after previously animated item
  • Support forward and backward animations directions
  • Support automatic re-animate after item exit viewport area
  • JS API (Service) + Custom Element - Plugin for simple initialization

ESLAnimateService

ESLAnimateService is a core of esl-animate module. Element needs to be observed by ESLAnimateService in order to be animated.

Service API:

  • ESLAnimateService.observe(els, config) - method to start element observation
    • els - Element or array of Elements to observe and animate
    • config - an optional ESLAnimateConfig object to describe the behavior of the animation functionality
  • ESLAnimateService.unobserve(els) - method to unsubscribe ESLAnimateService from observing elements
  • ESLAnimateService.isObserved(el) - check if element observed by ESLAnimateService

ESLAnimateConfig (Configuration API)

  • cls - CSS class or classes to control animation (in by default) (supports ESL extended class definition syntax, CSSClassUtil)
  • group (boolean) - enable group animation for items (item will start animation with a delay after previous item animation start)
  • groupDelay - number of milliseconds to delay animation in group
  • repeat (boolean) - refresh (re-animate) items when they became invisible (exit viewport)
  • force (boolean) - if true then allows to re-animate items when ESLAnimateService subscribed on already animated item
  • ratio (0.2|0.4|0.6|0.8) - intersection ratio to consider element as visible. Only 0.2 (20%), 0.4 (40%), 0.6 (60%), 0.8 (80%) values are allowed due to share of IntersectionObserver instance with a fixed set of thresholds defined.

ESLAnimate

ESLAnimate (<esl-animate>) - custom element to automatically initialize ESLAnimateService from html

Element API

  • target - target element or elements to animate, defined by ESLTraversingQuery
    Default: empty (animates itself)
  • cls - CSS class or classes to control animation (in by default) (supports ESL extended class definition syntax, CSSClassUtil)
  • group (boolean) - enable group animation for items (item will start animation with a delay after previous item animation start)
  • group-delay - number of milliseconds to delay animation in group
  • repeat (boolean) - refresh (re-animate) items when they became invisible (exit viewport)
  • ratio - number of intersection ratio to consider element as visible Only 0.2 (20%), 0.4 (40%), 0.6 (60%), 0.8 (80%) values are allowed due to share of IntersectionObserver instance with a fixed set of thresholds defined.

Use cases

  • plugin (target attribute defined)
<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

  • wrapper (no target attribute defined)
<esl-animate class="esl-animate-fade" cls="in">
    ...HTML Content...
</esl-animate>

ESL v4.2.0 © 2023 Exadel, Inc
Core Team Contributors: Alexey Stsefanovich, Julia Murashko, Yuliya Adamskaya, Dmytro Shovchko, Anna Barmina, Anastasiya Lesun
Design by Iryna Pavlenko