Getting Started with Animations

The TaylorUI animations library gives you two ways to add motion to your UI. Pick the right tool for the job:

  • CSS utilities — Tailwind-native @utility classes. Zero JS, works everywhere. Use for simple enter/exit animations, hover effects, and data-attribute-driven transitions.
  • Framer Motion — For gestures, coordinated stagger timelines, scroll-linked reveals, and route-level transitions that need JavaScript.

Choose your approach

CSS Utilities

Tailwind-native @utility classes. Trigger animations with data-state attributes. No JavaScript required.

<div
  data-state="visible"
  className="
    data-[state=hidden]:opacity-0
    data-[state=visible]:animate-in-fade-up
    data-[state=hidden]:animate-out-fade-down,
  "
>
  Animated element
</div>
animate-in-fade-up
See all CSS presets

Ready to use CSS & React components

There are also a few ready to use components, built with those CSS utilities, that can be directly used, with eg. buttons:

<Button>
  <SlideUpOnGroupHover>Hover me</SlideUpOnGroupHover>
</Button>
See all CSS & React animated Buttons

Framer Motion

For hover gestures, staggered children, scroll reveals, and orchestrated sequences. Use shared variants from @/animations.

import { motion } from 'framer-motion';
import { fadeUp } from '@/animations';

<motion.div
  variants={fadeUp}
  initial="hidden"
  animate="visible"
>
  Animated element
</motion.div>
fadeUp
See all Framer variants

Ready to use Framer Motion components

There are also a few ready to use components, built with framer motion, that can be directly used, with eg. buttons:

<Confetti>
  <Button>Click for confetti!</Button>
</Confetti>
See all Framer Buttons

Explore the library

Buttons & Hover Effects

SlideUp, Rotate, hover-underline, confetti on click, and content swap — all composed with existing Button components.

Transition Examples

Interactive demos of every CSS preset and Framer variant. Hover to trigger — great for comparing and choosing the right animation.

Using the Library

Complete reference of every CSS utility class, timing override, Framer variant, and preset — with code examples.

Motion Reveal

Scroll-triggered card reveal with stagger delays. Includes a skeleton loading preview and animation style picker.

Showcase

Real-world animations adapted from past Functn projects. Copy the components and wire them up to your own data.

Setup

Install dependencies

PackageInstall command
framer-motionnpm install framer-motion

Import the CSS

Add this line to your project's globals.css:

@import '../animations/css/animations.css';

This gives you all CSS utility classes (animate-in-fade, animate-in-fade-up, …) plus the design tokens for animation durations and easing curves.

Copy these folders

Copy to projectContains
src/animations/Framer variants, presets, MotionReveal, hover components, confetti, click-swap, view transitions, CSS utilities
src/lib/cn.tsClass name merge utility used by animation components