tailwindcss-elastic-easings

A plugin for Tailwind CSS that provides elastic and bounce transition timing functions.

[!NOTE]

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