← Home

Utils (@pim.sk/utils)

inViewportAnim

inViewportAnim wraps it with Animate.css support — adds animation classes on enter, removes them after the animation ends. The Animate.css library was used for these examples. Use in example: <link rel="stylesheet" type="text/css" href="https://animate.style/animate-4.0.0.min.css"> Link: https://animate.style/ 
import inViewportAnim from '@pim.sk/utils/inViewportAnim.mjs

inViewportAnim({ selector, anim })

Adds CSS animation class (Animate.css) when element enters the viewport. Removes the class after the animation ends.

options = {
    selector: ".inViewportAnim",  // default CSS selector
    anim:     "fadeInLeft",       // default Animate.css class
    once:     true,               // default
}
fadeInLeft
fadeInLeft
fadeInLeft
new inViewportAnim({
    selector: ".ivpa-basic-item",
    anim: "fadeInLeft",
    once: false,
})

HTML data attributes: data-anim, data-delay, data-duration

Override animation settings per element with HTML attributes. data-anim overrides the default anim. data-delay and data-duration set CSS animation timing.

<div class="ivpa-item" data-anim="zoomIn">
<div class="ivpa-item" data-anim="fadeInDown"  data-delay="300ms">
<div class="ivpa-item" data-anim="bounceIn"    data-delay="600ms" data-duration="1.5s">
data-anim="zoomIn"
data-anim="fadeInDown"  data-delay="300ms"
data-anim="bounceIn"  data-delay="600ms"  data-duration="1.5s"
// data-anim per element overrides the default anim option
new inViewportAnim({
    selector: ".ivpa-attrs-item",
    once: false,
})

callbacks: onViewport, onAnimationStart, onAnimationEnd

Hook into the animation lifecycle. onViewport fires on viewport enter, then CSS animation events follow.

{
    onViewport:        (el) => {},  // element entered viewport
    onAnimationStart:  (el) => {},  // CSS animationstart
    onAnimationEnd:    (el) => {},  // CSS animationend
    onAnimationCancel: (el) => {},  // CSS animationcancel
}
Animate me
new inViewportAnim({
    selector: ".ivpa-cb-item",
    anim: "fadeInLeft",
    once: true,
    onViewport:       el => output.textContent += "→ onViewport\n",
    onAnimationStart: el => output.textContent += "→ onAnimationStart\n",
    onAnimationEnd:   el => output.textContent += "→ onAnimationEnd\n",
})
v 1.1.2