tw-animate-css

The library uses a combination of base classes and transform/parameter classes to create animations.

To trigger an animation, you must apply a base class to define the animation type (in for entrance or out for exit), and then combine it with transform classes to define the visual effect.

Core Concepts:

• <io>: The animation type. Use in for entrance or out for exit.
• <dir>: The direction for sliding.
  • For entrance: in-from-top, in-from-bottom, in-from-left, in-from-right, in-from-start, in-from-end.
  • For exit: out-to-top, out-to-bottom, out-to-left, out-to-right, out-to-start, out-to-end.
• *: A value (like a percentage or number) to customize the effect.

Example:

<div class="animate-in fade-in zoom-in">...</div>

Rotate transforms allow elements to spin during entry or exit animations. To use these transforms, you must also apply the corresponding animation direction class:

• For entering elements: Use animate-in along with a spin-in-* class.
• For exiting elements: Use animate-out along with a spin-out-* class.

Both animate-in and animate-out can be customized using global animation parameters or specific enter/exit state variables.

Global Animation Parameters:

• --tw-duration: Animation duration (defaults to 150ms)
• --tw-ease: Easing function (defaults to ease)

Enter State Variables (for animate-in):

• --tw-enter-opacity
• --tw-enter-translate-x
• --tw-enter-translate-y
• --tw-enter-scale
• --tw-enter-rotate

Exit State Variables (for animate-out):

• --tw-exit-opacity
• --tw-exit-translate-x
• --tw-exit-translate-y
• --tw-exit-scale
• --tw-exit-rotate

Translate transforms allow you to slide elements in or out from various directions (top, bottom, left, right, start, end).

Important: To use these transforms, you must also apply the animate-in class for entry animations or the animate-out class for exit animations.

Transforms are used to modify how an element is rendered on the screen by setting its position, size, and rotation. In the context of animations, transforms define the starting and ending styles of the animated element.

NOTE

To use a transform, you must also apply the animate-in or animate-out classes respectively.

Because CSS height interpolation is not yet universally supported, accordion animations require a CSS variable to define the target height.

Depending on your framework/library, you should set one of the following variables on the accordion content element:

• --radix-accordion-content-height (Radix UI)
• --bits-accordion-content-height (BitsUI)
• --reka-accordion-content-height (Reka)
• --kb-accordion-content-height (Kobalte)
• --ngp-accordion-content-height (Angular Primitives)

If you are not using a supported headless UI library, you must manually set the height via inline styles or JavaScript.

Scale transforms allow you to zoom elements in or out during animations.

Important: Scale classes alone do not trigger an animation. You must pair them with either the animate-in class (for entering elements) or the animate-out class (for exiting elements).

If you are not using a headless UI library that automatically provides height variables, you can set the height manually using HTML or JavaScript.

<!-- HTML approach -->
<div style="--radix-accordion-content-height: 1.75em">...</div>

// JavaScript approach
document
  .getElementById("faq-accordion-1")
  .style.setProperty("--radix-accordion-content-height", "1.75em");

If you prefer not to use NPM, you can manually include the CSS file.

1. Download the tw-animate.css file from the GitHub repository.
2. Place the file next to your app.css or globals.css.
3. Import it using a relative path:

   @import "./tw-animate.css";

These classes are direction-aware (LTR vs RTL) and move elements towards the beginning or end of the text direction.

• slide-out-to-start: Slides out towards the start of the text direction.
• slide-out-to-end: Slides out towards the end of the text direction.

Customization:

• Numeric scale: slide-out-to-start-<number>
• Custom property: slide-out-to-start-(<custom-property>)
• Arbitrary value: slide-out-to-start-[<value>]

Because browser support for interpolate-size: allow-keywords is limited, you must manually or automatically provide the full height of the collapsible content using a CSS variable. The animation classes look for these specific variables in order:

1. --radix-collapsible-content-height (Radix UI)
2. --bits-collapsible-content-height (BitsUI)
3. --reka-collapsible-content-height (Reka UI)
4. --kb-collapsible-content-height (Kobalte)
5. auto (fallback)

Manual Implementation

HTML:

<div style="--radix-collapsible-content-height: 1.75em">...</div>

JavaScript:

document
  .getElementById("faq-accordion-1")
  .style.setProperty("--radix-collapsible-content-height", "1.75em");