TailwindCSS Animation Sequencing Plugin
Custom Developer ToolingLinks
- View the demo to see a basic example.
- View the demo's GitHub repo.
Plugin Details
Purpose
Often times while animating web layouts, there's a need for sequencing/staggering the animations. While trivial with Javascript or CSS Custom Properties, I wanted a utility first approach to quickly put together my timing sequence, define keyframes, and access the "steps" in the sequence using native TailwindCSS.
This plugin generates utility classes for sequencing animations with Tailwind classes as well as animation duration utilities. It acts as an extension of the native animation APIs surfaced via Tailwind's config, and allows a more robust set of animation utilities than hand-writing a long list of animation values, per the usual use case cited in Tailwind's docs.
To generate a 5 step animation sequence, with stepped control over durations, would take a significant number of custom animation definitions in your TW config. With this plugin, all of those variations and sequencing is generated for you.
Example of classes generated
1<div>
2 <p class="animate-fade-in">I animate at the <strong>immediately</strong>, or first step in the sequence</p>
3 <p class="animate-fade-in-2">I animate at the <strong>second</strong> step in the sequence</p>
4 <p class="animate-fade-in-3">I animate at the <strong>third</strong> step in the sequence</p>
5 <p class="animate-fade-in-4 animation-duration-1000">I animate at the <strong>fourth</strong> step in the sequence, and have a duration of 1000</p>
6</div>
Example tailwind.config.js
1// tailwind.config.js
2module.exports = {
3 theme: {
4 extend: {
5 keyframes: {
6 "slide-up": {
7 "0%": { transform: "translateY(24px)", opacity: 0 },
8 "100%": { transform: "translateY(0)", opacity: 1 },
9 },
10 },
11 },
12 // Animation sequencing plugin options
13 animationSequence: {
14 // Utility will be generated using the [index + 1] of these delay values
15 sequence: ["0s", ".25s", ".50s", ".75s", "1s"],
16 options: {
17 // Default animation duration for sequenced animations
18 // can be overridden via animation-duration utilities generated by the plugin
19 duration: "0.5s",
20 // Default animation timing function for animations
21 easing: "ease-in-out",
22 // Default fill mode applied to animations
23 fillMode: "both",
24 },
25 },
26 }
27}
28
How classes are generated
This is the function in the plugin that generates the utilities:
1const makeAnimationSequenceUtilities = (keyframes, options, sequence) => {
2 const animations = {};
3 const animationValues = [];
4 const animationKeys = [];
5
6 Object.keys(keyframes).forEach((keyframeName) => {
7 sequence.forEach((sequent, idx) => {
8 animationKeys.push(
9 `.animate-${keyframeName}${idx === 0 ? `` : `-${idx + 1}`}`
10 );
11 animationValues.push({
12 "animation-name": keyframeName,
13 "animation-fill-mode": options.fillMode || "",
14 "animation-delay": sequent,
15 "animation-timing-function": options.easing,
16 "animation-duration": options.duration || "",
17 });
18 });
19 });
20
21 animationKeys.forEach((_, idx) => {
22 animations[animationKeys[idx]] = animationValues[idx];
23 });
24
25 return animations;
26};
Animation Duration Utilities
This plugin also generates animation duration utilities. Right now, these are generated based on the `transitionDuration` values.