How to make use of it:

1. Download the package and import the mandatory modules as follows:

import {animateElement, animateStack, getAnimationDuration} from "./src/index.js";

2. Apply a ‘pulse’ effect to a component:

<div id="example-1">
  <div class="square"></div>
</div>

#example-1 .animate-pule-active {
  transition: ease-out 0.3s transform;
}

#example-1 .animate-pule {
  transform: scale(0.5)
}

#example-1 .animate-pule-end {
  transform: scale(1)
}

let element = document.querySelector("#example-1 .square")
await animateElement(element, "pulse")

3. You also can apply a number of CSS animations to a component:

<div id="example-2">
  <div class="square"></div>
</div>

#example-2 .square {
  position: relative;
  top: 0;
  left: 0;
}

#example-2 .animate-slide-right, #example-2 .animate-slide-left {
  transition: ease 0.3s left;
}

#example-2 .animate-slide-right, #example-2 .animate-slide-left-end {
  left: -200%;
}

#example-2 .animate-slide-right-end, #example-2 .animate-slide-left {
  left: 200%;
}

let element = document.querySelector("#example-2 .square")
await animateElement(element, "slide-right")
await animateElement(element, "slide-left")

4. The following instance reveals how one can control the animation utilizing promise.

<div id="example-3" class="content">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

#example-3 .animate-enter-active, #example-3 .animate-leave-active {
  transition: ease-out 0.5s all;
}

#example-3 .animate-enter-step,
#example-3 .animate-leave-step {
  transition-delay: 100ms;
}

#example-3 .animate-enter-step:last-child {
  transition-delay: 150ms;
}

#example-3 .animate-enter {
  transform: translateY(50px);
  opacity: 0;
}

#example-3 .animate-leave-end {
  opacity: 0;
}

#example-3 .hidden {
  opacity: 0;
}

let elements = Array.from(document.querySelectorAll("#example-3 .card"))
elements.forEach(el => el.classList.remove("hidden"))
await animateStack("enter", elements)
await new Promise(res => setTimeout(res, 2000))
await animateStack("leave", elements)
elements.forEach(el => el.classList.add("hidden"))
await new Promise(res => setTimeout(res, 500))

5. Apply a delay to the animation.

await animateElement(element, "pulse",{
      extraDelay: 200
})

6. Determine whether or not to reject the promise if the animation is cancelled with clearAnimation() the technique.

await animateElement(element, "pulse",{
      rejectOnCancel: true
})

Handling CSS Animations With Promise Support, Anim-x Plugin/Github

See Demo And Download