Animation Sequencing Demo

Demo

View the demo to see a basic example.

How to use

npm install
npm run dev

🚧 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 vaules, 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 sigificant 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 🙂

<div>
 <p class="animate-fade-in">I animate at the <strong>immediately</strong>, or first step in the sequence</p>
 <p class="animate-fade-in-2">I animate at the <strong>second</strong> step in the sequence</p>
 <p class="animate-fade-in-3">I animate at the <strong>third</strong> step in the sequence</p>
 <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>
</div>

Installation

To use this plugin, copy this file into your plugins folder

Example tailwind.config.js ⚙️

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      keyframes: {
        "slide-up": {
          "0%": { transform: "translateY(24px)", opacity: 0 },
          "100%": { transform: "translateY(0)", opacity: 1 },
        },
      },
    },
    // Animation sequencing plugin options
    animationSequence: {
      // Utility will be generated using the [index + 1] of these delay values
      sequence: ["0s", ".25s", ".50s", ".75s", "1s"],
      options: {
        // Default animation duration for sequenced animations
        // can be overridden via animation-duration utilities generated by the plugin
        duration: "0.5s",
        // Default animation timing function for animations
        easing: "ease-in-out",
        // Default fill mode applied to animations
        fillMode: "both",
      },
    },
  },
  plugins: [require("./plugins/animation-sequencing")],
}

How it works

Using the above config's sequence array, you will have:

Class	Outcome
animate-slide-up	slide-up animation runs with 0s delay
animate-slide-up-2	slide-up animation runs with .25s delay
animate-slide-up-3	slide-up animation runs with .50s delay
animate-slide-up-4	slide-up animation runs with .75s delay
animate-slide-up-5	slide-up animation runs with 1s delay

How classes are generated

This is the function in the plugin that generates the utilities:

const makeAnimationSequenceUtilities = (keyframes, options, sequence) => {
  const animations = {};
  const animationValues = [];
  const animationKeys = [];

  Object.keys(keyframes).forEach((keyframeName) => {
    sequence.forEach((sequent, idx) => {
      animationKeys.push(
        `.animate-${keyframeName}${idx === 0 ? `` : `-${idx + 1}`}`
      );
      animationValues.push({
        "animation-name": keyframeName,
        "animation-fill-mode": options.fillMode || "",
        "animation-delay": sequent,
        "animation-timing-function": options.easing,
        "animation-duration": options.duration || "",
      });
    });
  });

  animationKeys.forEach((_, idx) => {
    animations[animationKeys[idx]] = animationValues[idx];
  });

  return animations;
};

Animation Duration Utilities ⏰

This plugin also generates animation duration utilities. Right now, these are generated based on the transitionDuration values

So, if using the default TW transitionDuration config, you will have these classes available:

Class	Properties
animation-duration-75	animation-duration: 75ms;
animation-duration-100	animation-duration: 100ms;
animation-duration-150	animation-duration: 150ms;
animation-duration-200	animation-duration: 200ms;
animation-duration-300	animation-duration: 300ms;
animation-duration-500	animation-duration: 500ms;
animation-duration-700	animation-duration: 700ms;
animation-duration-1000	animation-duration: 1000ms;