Animations

Animations

ForgeUI uses Framer Motion for all animations, providing smooth, GPU-accelerated transitions.

Installation

Framer Motion is a core dependency:

npm install framer-motion

Basic Usage

Import motion components and apply animations:

import { motion } from "framer-motion";

export function FadeIn({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
    >
      {children}
    </motion.div>
  );
}

ForgeUI Animation Presets

Use the pre-built animation primitives from the Animation Library:

Custom CSS Animations

ForgeUI also provides CSS keyframe animations in globals.css:

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

Performance Tips

1. 1Use `will-change` sparingly — Only on actively animating elements
2. 2Prefer `transform` and `opacity` — These are GPU-accelerated
3. 3Use `layout` prop carefully — It can cause reflows on complex layouts
4. 4Lazy load animations — Use intersection observers for scroll animations