PostCSS plugin to replace easing names to cubic-bezier()
Clone or download
Latest commit 36be8ee Sep 7, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.editorconfig Clean up Editor Config Sep 7, 2018
.gitignore Use npm run and Jest May 8, 2017
.npmignore Update npm ignore Sep 7, 2018
.travis.yml Update Travis CI config Sep 7, 2018
CHANGELOG.md Release 2.0 version Sep 7, 2018
LICENSE Init project Feb 7, 2015
README.md Use SVG logo Jan 21, 2016
index.js Update dependencies Sep 7, 2018
index.test.js Update dependencies Sep 7, 2018
package.json Release 2.0 version Sep 7, 2018
yarn.lock Update dependencies Sep 7, 2018

README.md

PostCSS Easings Build Status

PostCSS plugin to replace easing name from easings.net to cubic-bezier().

.snake {
    transition: all 600ms ease-in-sine;
}
.camel {
    transition: all 600ms easeInSine;
}
.snake {
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
.camel {
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

Usage

Without options:

postcss([ require('postcss-easings') ])

With options:

postcss([
    require('postcss-easings')({
        easings: { easeJump: 'cubic-bezier(.86,0,.69,1.57)' }
    })
])

See PostCSS docs for examples for your environment.

Also you can get all build-in easings:

require('postcss-easings').easings;

Options

easings

Allow to set custom easings:

require('postcss-easings')({
    easings: { easeJump: 'cubic-bezier(.86,0,.69,1.57)' }
})

Plugin will convert custom easing name between camelCase and snake-case. So example below adds easeJump and ease-jump easings.

Custom easing name must start from ease and contain only letters and -.

You can create custom easing on cubic-bezier.com.