@jarijokinen/animate v0.0.2

animate

A zero-dependency, vanilla JavaScript library for animating elements when they appear in the viewport.

Installation

NPM:

npm install @jarijokinen/animate

Yarn:

yarn add @jarijokinen/animate

Usage

import { animate } from '@jarijokinen/animate';

document.addEventListener('DOMContentLoaded', () => {
  animate();
});

Configuration

const options = {
  elements: document.querySelectorAll('.animate'),
  class: 'fade-in-up',
  root: null,
  rootMargin: '0px',
  threshold: 0.0
};

animate(options);

CSS animation class example

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 80px, 0); 
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0); 
  }
}
.fade-in-up {
  animation: fadeInUp 500ms ease-in-out;
  animation-fill-mode: both;
}

License

MIT License. Copyright (c) 2022 Jari Jokinen. See LICENSE for further details.