tailwindcss-elastic-easings v0.2.0
tailwindcss-elastic-easings
A plugin for Tailwind CSS that provides elastic and bounce transition timing functions.
Compatibility
Transition timing functions provided by this plugin currently don't work on Safari and Mobile. See #Compatibility for more details and fallback behavior/options.
Installation
Install the plugin from npm:
npm install tailwindcss-elastic-easings
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require("tailwindcss-elastic-easings"),
// ...
],
};
Usage
Define a transition and set the desired transition-timing-function (here ease-elastic-out
).
<div
className="transition-transform duration-1000 ease-elastic-out hover:translate-x-8"
>
Hover me
</div>
transition-timing-functions
ease-elastic-in
ease-elastic-out
ease-elastic-in-out
ease-bounce-in
ease-bounce-out
ease-bounce-in-out
Compatibility
tailwindcss-elastic-easings
relies on linear easing functions (linear()
).
These are currently not supported by Safari, as well as most mobile browsers. When not supported it will fall back to the default tailwind easing.
Missing support can be detected with the no-elastic
modifier.
<div
className="transition-transform duration-1000 ease-elastic-out hover:translate-x-8 no-elastic:ease-in-out"
>
Hover me
</div>
Configuration
This plugin can be configured by passing a configuration object to it.
// ...
plugins: [
require("tailwindcss-elastic-easings")({
resolution: 45,
customEasings: {
'rand': (x: number) => x + (Math.random() - 0.5) * (0.5 - Math.abs(x - 0.5)),
}
}),
// ...
],
// ...
Configuration options
Option | Type | Description | Default |
---|---|---|---|
resolution | number | Number of points that are calculated for the easing curves | 30 |
customEasings | Record<string, EasingFunction> | Object to add or overwrite easing functions (see Custom easings) | {} |
Custom easings
Custom easings can be used to implement all sorts of easing curves.
The customEasings
options takes an object where the keys are the names of the functions and the values a function with the signature (value: number) => number
.
The name will transformed from camelCase to kebab-case and prepended with ease-
to creat the tailwind utility class name.
E.g. fancyCurve
becomes ease-fancy-curve
.
The function value can be any function that takes a number and returns a number.
The easiest example would be (value: number) => value
, which creates a linear easing function.
The function will be called with values from 0
to 1
with steps of 1 / resolution
to create the easing curve.
Acknowledgments
- easing functions by https://easings.net