Create Chainable Animations For DOM Elements – jsanimate

Preview:

Description:

jsanimate is a lightweight JavaScript animation library that allows you to compose your animations in a programmatic way.

Animations Included:

• fade
• rotate
• translate
• scale
• 3D perspective

How to use it:

1. Install & download.

# NPM
$ npm i @damain/jsanimate

2. Import the jsanimate library.

import Jsanimate from "@damain/jsanimate"

<!-- OR -->
<script type="module">
  import Animate from './jsanimate.js'
</script>

3. Get an element to animate.

let myEl = new Animate(".myElement");

4. Fade in/out the element.

myEl.fade().run();
myEl.fade(false).run();

5. Rotate the element.

elToAnimate.rotate(108);
elToAnimate.rotate({ 
  angle: "45", 
  add: true 
}).run();
// OR
myEl.rotateX("45deg").run();
myEl.rotateY(".5turn").run();
myEl.rotateZ("45deg").run();

6. Scale the element.

myEl.scale(5).run();
// OR
myEl.scale({ 
  x: 5, 
  y: 5, 
  add: true 
}).run();

7. Move the element.

myEl.translate({
  x: 5
}).run();
myEl.translate({ 
  x: 5, 
  y: 5, 
  add: true 
}).run();
// OR
myEl.translateX("45deg").run();
myEl.translateY(".5turn").run();
myEl.translateZ("45deg").run();

8. Apply a 3D perspective animation to the element.

myEl.perspective("300px").run();
// REMOVE
myEl.perspective("nome").run();
// OR
myEl.set3DPerspective(true, "6cm").run();

9. Compose complex animations by chaining these methods:

myEl
  .perspective("6cm")
  .translate({x:200, y:0}).run()
  .rotateY("1turn").run({endDelay: 100})
  .transformOrigin("top right").run()
  .rotate(-30).run({delay: 1000, easing: "cubic-bezier(.34,-0.06,.1,1.6)"})
  .translate({x:200, y: 300}).fade().run({delay: 1500})

10. More API Methods.

// reset
myEl.reset();
// reverse the animation
myEl.reverse();
// run the animation with options
myEl.run({
 delay: 1000, 
 iterations: 2 
});
// set the origin (pivot point) of the animation
myEl.transformOrigin("center");
myEl.transformOrigin("top left");