PrimeElements

A library for applying motion effects to HTML elements.

Installation

Install via npm:

npm install primeelements

USAGE

Include the minified script in your HTML:
<script src="https://unpkg.com/[email protected]/motionEffects.min.js"></script>

Or if you're using a module bundler like Webpack, you can import it in your JavaScript file:
import PrimeElements from 'primeelements';


Applying Motion Effects
To use the motion effects, you can call the functions provided by the library. Here are some examples:

Slide In Left
const element = document.getElementById('myElement');
PrimeElements.slideInLeft(element, { distance: 100, duration: 1000, delay: 500 });

Fade In Right
const element = document.getElementById('myElement');
PrimeElements.fadeInRight(element, { distance: 100, duration: 1000, delay: 500 });

Slide In Down
const element = document.getElementById('myElement');
PrimeElements.slideInDown(element, { distance: 100, duration: 1000, delay: 500 });

Scale In Up
const element = document.getElementById('myElement');
PrimeElements.scaleInUp(element, {duration: 1000, delay: 500 }); //no distance for scale in effects

Write Mode
const element = document.getElementById('myElement');
PrimeElements.writeMode(element, { duration: 1000, delay: 500 }); //options = duration and delay


OPTIONS
The options parameter allows you to customize the motion effects. The available options are:

distance: The distance the element will move (in pixels).
duration: The duration of the animation (in milliseconds).
delay: The delay before the animation starts (in milliseconds).


If you don't specify options, the default options will be used:
const defaultOptions = {
  distance: 200,
  duration: 1500,
  delay: 0,
};