@exah/a v0.0.1

A

Animation engine and utility functions for web

Usage

API is unstable so I recommend you to install package with --exact flag. Package will be scoped under @exah/ until I find a better name 🙃

Install

$ npm install --save --exact @exah/a
# OR
$ yarn add --exact @exah/a

API

coming soon

Example

• Import required modules

  1. Import as es6 modules with webpack 2 / rollup (smaller result bundle)

     import animate from '@exah/a/animate'
     import easeInOut from '@exah/a/timing/ease-in-out'
     import updateStyles from '@exah/a/update-styles'
     import withEase from '@exah/a/with-ease'
     
     // do something awesome

  2. With webpack 1 or browserify you can require from umd bundle

     import { animate, easeInOut, updateStyles, withEase } from '@exah/a'
     
     // do something awesome

  3. Or as standalone library in browser, available as A global variable

       <script src="path/to/a.umd.bundle.js"></script>
       <script>
         (function () {
           var { animate, easeInOut, updateStyles, withEase } = A
           
           // do something awesome
         })()
       </script>

• Then animate

  const fadeAway = animate(
    withEase(easeInOut()), 
    updateStyles('body', { opacity: 0 })
  )
  
  fadeAway(1000).finished.then(() => console.log('done!'))

Public Release

• add "Why?" section
• add "API" section
• information of required polyfills
• compare with other libraries
• animate multiple dom elements with styles function
• handle css transforms & prefixes
• animate svg & html attributes
• iterations / play direction (forward, reverse, both)
• both scroll directions
• separate duration module from core
• react-motion behavior
• scroll behavior
• demo page

MIT © John Grishin