@jarijokinen/animate

0.0.2 • Public • Published

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @jarijokinen/animate

Weekly Downloads

0

Version

0.0.2

License

MIT

Unpacked Size

3.34 kB

Total Files

4

Last publish

Collaborators

  • jarijokinen