easing-constants

Some useful strings to be used in JavaScript for animations with nice easing (=equivalent to transition-timing-function in CSS).

Usage no npm install needed!

<script type="module">
  import easingConstants from 'https://cdn.skypack.dev/easing-constants';
</script>

README

easing-constants

Some useful strings to be used in JavaScript for animations with nice easing (=equivalent to transition-timing-function in CSS).

Env Compatibility

Just import it the way you want. It's available

  • as modern ES-module (webpack, parcel or whatever module bundler you're using) - see module-field in package.jsonA
  • as "legacy" UMD build - see browser-field
  • or even for usage in pure nodejs - see main-field in package.json

Usage

import EASING from 'easing-constants';

document.body.animate([
    {
        backgroundColor: 'lightblue'
    },
    {
        backgroundColor: 'hotpink'
    },
    {
        backgroundColor: 'lightgreen'
    }
], {
    duration: 2000,
    easing: EASING.IN_OUT_CUBIC,
    fill: "forwards"
})

The default export (the EASING-variable above) is an simple object containing currently the following keys:

  • IN_OUT_CUBIC
  • IN_OUT_QUADRATIC
  • ACCELERATE_QUADRATIC
  • ACCELERATE_CUBIC
  • DECELERATE_QUADRATIC
  • DECELERATE_CUBIC

Development

  • npm run dev
  • npm run test
  • npm run build

License

MIT.