TailwindCSS Animation Sequencing Plugin

Custom Developer Tooling

Links

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.

contact meviaemail

jared@jared.to

© 2021 Jared BrownIndianapolis, IN