vanilla-animation

v1.0.7

Published

3 months ago

a super light vanilla animation scroll down

0High
0Medium
0Low

mitera

animation scroll down vanilla super light vanimation

vanilla-animation.js

Demo - Features - Install - Usage - Options - Data API - Changelog - License

Inspired by: AOS and WOW

Vanilla Animation: super light lib for reveal CSS animation as you scroll down a page.

Demo

See the vanilla-animation.js demo.

Features

reveal CSS animation as you scroll down a page
by default, you can use it to trigger animate.css animations. But you can easily change the settings to your favorite animation library.
anywhere on the page and anywhere in the DOM
tested in Edge, Chrome, Firefox

Install

CDN via jsDelivr

<script src="https://cdn.jsdelivr.net/npm/vanilla-animation@latest/dist/vanilla-animation.min.js" type="text/javascript"></script>

Download vanilla-animation.js and include the script in your HTML file:

<script src="vanilla-animation.js" type="text/javascript"></script>

You can also install using the package managers NPM.

npm install vanilla-animation

modular code

import VanillaAnimation from 'vanilla-animation'

Usage

Add styles in <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

Add script right before closing </body> tag, and initialize it:

<script>
    new VanillaAnimation();
</script>

Set css animation on data-vanimation or directly on class attribute:

<div data-vanimation="animate__fadeIn">
    test1
</div>

For compatibility with wow, add vanimation on class attribute and you can use animate__ animation directly on classes:

<div class="vanimation animate__fadeIn">
    test2
</div>

And adjust behaviour by using data-vanimation-* attributes:

<div 
    data-vanimation="animate__fadeIn"
    data-vanimation-offset="200"
    data-vanimation-delay="50"
    data-vanimation-duration="1000"
    data-vanimation-iteration="5"
>
    test3
</div>

Options

The default options are:

{
    boxClass: '.vanimation, [data-vanimation]',
    animatePrefix: 'animate__',
    animateClass: 'animate__animated',
    offset: 0,
    mobile: true,
    live: true,
    scrollContainer: null,
    callback: null
}

Where:

boxClass is a string that containing the selector classes. This string must be a valid CSS selector string
animatePrefix is a string that indicated the prefix of animation if not using data-animation attribute.
animateClass is a string that indicated the end of animation.
offset is the offset in pixels from the bottom of the viewport when the animation should start
mobile is true or false to enable mobile detection
live is true or false to enable live detection
scrollContainer is an optional element to use instead of the window

callback is a callback function that is called when the animation is completed

  new VanillaAnimation({
      callback: function(el) {
          el.classList.add("vanimation-active");
      }
  });

Data API

data-vanimation="animate__fadeIn" is the animation class name
data-vanimation-offset="200" is the offset in pixels from the bottom of the viewport when the animation should start
data-vanimation-delay="0.5s" is animation delay time is seconds or milliseconds
data-vanimation-duration="500ms" is animation duration time is seconds or milliseconds
data-vanimation-iteration="5" is the animation iteration count
data-vanimation-reload="true" set to true to reload the animation on scroll

Known limitations

CSS transitions and animations on mobile device

Chrome on Android requires that you set "minimum-scale=1" in the "viewport" meta of your page. Not doing so causes the scrollY value to start increasing only after a good portion of the page is already scrolled

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1">

Changelog

To see what's new or changed in the latest version, see the changelog

License

This license is also supplied with the release and source code. As stated in the license, absolutely no warranty is provided.