Using the Animations Library

A complete reference for every CSS utility class and Framer Motion variant available in TaylorUI. Use this page to pick the right animation for your use case.

What you can find on this page:

1. CSS Utilities
2. Framer Motion
3. What to copy into another project

CSS Utilities

The CSS animation system has two layers:

Convenience presets — single-class animations with duration and easing defaulting to the design tokens. Reach for these by default. Override timing with duration-_ and ease-_ when the defaults aren't right.

animate-in-* presets default to slow (500ms) + ease-out. animate-out-* presets default tofast (150ms) + ease-in.

Base layer — composable primitives for full control. Use when no preset covers your combination — e.g. a directional slide with custom timing, or mixing enter properties the presets don't expose.

Enter presets

{/* default timing from tokens */}
<div className="data-[state=visible]:animate-in-fade-up" data-state="hidden">
  Animated element
</div>;
 
{/* tuned timing */}
<div
  className="data-[state=visible]:animate-in-fade-up duration-200"
  data-state="hidden"
>
  Animated element
</div>;

Combine these with data-state attributes to trigger animations:

Exit presets

{/* default timing from tokens */}
<div className="data-[state=visible]:animate-out-fade" data-state="hidden">
  Animated element
</div>;
 
{/* tuned timing */}
<div
  className="data-[state=visible]:animate-in-fade-down duration-200"
  data-state="hidden"
>
  Animated element
</div>;

Pair with enter presets for open/close UI like dropdowns and popovers:

Base layer

<div className="animate-in fade-in slide-in-from-top-1 duration-200 ease-out">
  Entering element
</div>
<div className="animate-out fade-out slide-out-to-top-1 duration-150 ease-in">
  Exiting element
</div>

For custom animations, compose animate-in or animate-out with direction modifiers:

Duration & easing overrides

Append these utilities to override the default timing. The standalone presets use --animation-duration-slow (500ms) and --animation-ease-out by default.

data-state

Toggle data-state yourself to trigger presets on hover, click, or other interactions:

<div
  className="data-[state=hidden]:opacity-0 data-[state=visible]:animate-in-fade-up"
  data-state={isVisible ? 'visible' : 'hidden'}
>
  Controlled element
</div>

Framer Motion

Use Framer for gesture-driven interactions, coordinated stagger timelines, or route-level transitions that are easier to express in JS.

import { motion } from 'framer-motion';
 
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />;

Import variants and presets from @/animations. Each variant defines hidden and visible states so they work with initial / animate props on motion components. Presets are spread directly onto motion elements.

Variants

import { motion } from 'framer-motion';
import { fadeUp, staggerContainer } from '@/animations';
 
<motion.div variants={staggerContainer} initial="hidden" animate="visible">
  <motion.div variants={fadeUp}>Item 1</motion.div>
  <motion.div variants={fadeUp}>Item 2</motion.div>
  <motion.div variants={fadeUp}>Item 3</motion.div>
</motion.div>;

Presets

Presets are pre-configured MotionProps objects with initial, animate, exit, and transition already set. Spread them directly onto any motion component.

import { AnimatePresence, motion } from 'framer-motion';
import { pageTransition } from '@/animations';
 
<AnimatePresence mode="wait">
  <motion.div key={pathname} {...pageTransition}>
    {children}
  </motion.div>
</AnimatePresence>;

What to copy into another project

• src/animations/css/
• src/animations/framer/
• src/animations/components/
• src/animations/index.ts

In your global stylesheet, include:

@import '../animations/css/animations.css'; /* includes tokens.css */