@exah/a

⚠️ This project is work in progress ⚠️

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

  • 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
  

  • With webpack 1 or browserify you can require from umd bundle

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

  • 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