Handling CSS Animations With Promise Support – Anim-x.js

Preview:

Description:

Anim-x is a tiny JavaScript animation library that helps you easily control the CSS powered animations applied to DOM elements.

How to use it:

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

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

2. Apply a ‘pulse’ effect to an element:

<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 can also apply multiple CSS animations to an element:

<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 example shows how to control the animation using 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 to reject the promise if the animation is cancelled with clearAnimation() method. Default: false.

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

Changelog:

v2.0.0 (09/29/2021)

• Added anchor bounding