https://github.com/robertoentringer/animations.js

Npm package - Web Animations API based in Animate.css.
https://github.com/robertoentringer/animations.js

animations babel eslint js parcel prettier transitions waapi web-animations-api

Last synced: about 6 hours ago
JSON representation

Npm package - Web Animations API based in Animate.css.

• Host: GitHub
• URL: https://github.com/robertoentringer/animations.js
• Owner: robertoentringer
• License: mit
• Created: 2019-03-25T16:14:07.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-12-20T14:42:31.000Z (almost 4 years ago)
• Last Synced: 2024-11-15T02:39:12.141Z (4 days ago)
• Topics: animations, babel, eslint, js, parcel, prettier, transitions, waapi, web-animations-api
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/animations.js
• Size: 789 KB
• Stars: 5
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Web Animations API based in Animate.css

The Web Animations API lets us construct animations and control their playback with JavaScript.

Npm package : https://www.npmjs.com/package/animations.js   

Demo : https://animations.now.sh    

[![screenshot.png](screenshot.png)](https://animations.now.sh)

## Resources

Web Animations API - Web APIs | MDN  

https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

Rachel Nabors - Web Animations API resources   

http://rachelnabors.com/waapi

Css tricks - CSS Animations vs Web Animations API  

https://css-tricks.com/css-animations-vs-web-animations-api/

Daniel C. Wilson - Tutorial series on the Web Animations API  

https://danielcwilson.com/tags/web-animations-api/

Animate.css by Daniel Eden  

http://daneden.github.io/animate.css

## Install

CDN : 

```htlm

````

NPM : 

```

$ npm install animations.js

```

## Usage

```js

import { animations } from "animations.js" // es6 module

//or 

const animations = window["animations.js"].animations // cdn

const options = {

  iterations: Infinity,

  iterationStart: 0,

  delay: 0,

  endDelay: 0,

  direction: "alternate",

  duration: 700,

  fill: "forwards",

  easing: "linear",

}

const keyframes = animations.fadeIn // animations.bounce /  animations.flash, animations.pulse, etc...

const play = document.getElementById("ElementToAnimate").animate(keyframes, options)

```

## See all available animations in : 

https://github.com/robertoentringer/animations.js/blob/master/src/animations.js