apex-animate

Trigger animations with a simple data-attribute.

Usage no npm install needed!

<script type="module">
  import apexAnimate from 'https://cdn.skypack.dev/apex-animate';
</script>

README

Apex Animate npm (scoped)

Apex Animate

Trigger high-performance animations with a simple data-attribute

Installation

Install from npm

$ npm install apex-animate

Usage

Import/require apex-animate in your file.

import apexAnimate from 'apex-animate'

// or

const apexAnimate = require('apex-animate')

Use the data-attributes on HTML elements.

<!-- Fade in animation -->
<div data-apex-animate="fade-in"></div>

<!-- Parallax animation -->
<div data-apex-animate="parallax"></div>

Optional: tweak options for the duration and delay (both in seconds).

<!-- Fade in to top with extra options -->
<div data-apex-animate="fade-to-top" data-apex-animate-duration="2" data-apex-animate-delay=".2"></div>

The following animations are currently available:

'fade-to-top'
'fade-to-right'
'fade-to-bottom'
'fade-to-left'
'fade-in'
'parallax'

License

This project is available under the MIT license.