easings.net VS animated-tailwindcss

Easings: When working with animations and transitions, Easings provides a comprehensive cheat sheet for various easing functions, allowing developers to visualize and choose the perfect timing curve for their projects.

Something like this: https://easings.net/#easeOutExpo

Very timely and helpful, thank you!

A suggestion: the pulse animation would look much better with ease-in / ease-out animation curves instead of the harsh linear curve it's currently using. EaseInOutSine from this cheat sheet would do fine: https://easings.net/

One I like to reference is this easing functions cheatsheet. Its aimed at programming animations, but a lot of the principles apply to your needs.

I feel like BB should definitely have easings (specifically the ones on easings.net) for keyframes. Any thoughts?

> I wasn’t sure what type of math function would work for this

Usually people use "easing functions", which are convenient since they typically have a range and image both in [0.0 .. 1.0] [1] (although sometimes the range is slightly above 1 or below 0 to produce some "effect"). CSS has a cubic-bezier function [2] that can be used to replicate pretty closely all sorts of easing functions.

Functions that look like an "S" when plotted are called "sigmoids", a popular one used in graphics applications is called "Smoothstep" [3].

--

1: https://easings.net

2: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-func...

3: https://en.wikipedia.org/wiki/Smoothstep

I am excited that recently I released its version 3 that is fully compatible with Tailwind CSS v3. One can read the docs here. The package provides utilities to customize all the animation-related properties. Most of the utilities support arbitrary values too. I have also added all the CSS-compatible animation timing functions there are at easings.net. For some animations, you can also customize their translating distance (for example, in case you want subtle entrance/exit). The package is open-source and MIT licensed (GitHub). Please try using the configuration. Any feedback is much appreciated.

Please give the configuration a try. If you feel that something went wrong, please comment and/or create an issue on GitHub. I am working on adding options to customize animation duration, delay, etc. These will be available soon!