Animation

The @foundrykit/animation package provides animation components and utilities built on top of Framer Motion, offering smooth and performant animations for your applications.

Features

• Framer Motion integration: Built on the powerful Framer Motion library
• Pre-built animations: Common animation patterns and transitions
• Performance optimized: Optimized for smooth 60fps animations
• TypeScript support: Full TypeScript support with proper type definitions
• Accessible: Animations respect user preferences and accessibility settings

Installation

pnpm add @foundrykit/animation

Usage

import { AnimatePresence, motion } from '@foundrykit/animation'

function MyComponent() {
  const [isVisible, setIsVisible] = useState(false)
  
  return (
    <AnimatePresence>
      {isVisible && (
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -20 }}
          transition={{ duration: 0.3 }}
        >
          Animated content
        </motion.div>
      )}
    </AnimatePresence>
  )
}

Available Components

Animation Components

• AnimatePresence - Handle exit animations for conditional rendering
• MotionDiv - Animated div component
• MotionButton - Animated button component
• MotionCard - Animated card component

Transition Components

• FadeIn - Fade in animation component
• SlideIn - Slide in from various directions
• ScaleIn - Scale in animation component
• Stagger - Stagger children animations

Layout Components

• AnimatedLayout - Animated layout transitions
• AnimatedGrid - Animated grid layout
• AnimatedList - Animated list with item transitions

Animation Utilities

Preset Animations

• fadeIn - Fade in animation preset
• slideIn - Slide in animation preset
• scaleIn - Scale in animation preset
• bounceIn - Bounce in animation preset

Transition Presets

• easeInOut - Smooth ease in/out transition
• spring - Spring-based transition
• stagger - Staggered animation timing
• delay - Delayed animation start

Gesture Animations

• hover - Hover state animations
• tap - Tap/click animations
• drag - Drag gesture animations
• pan - Pan gesture animations

Animation Categories

Entrance Animations

Animations for elements entering the viewport or becoming visible.

Exit Animations

Animations for elements leaving the viewport or becoming hidden.

State Animations

Animations for different component states (hover, focus, active).

Layout Animations

Animations for layout changes and transitions.

Best Practices

• Respect user preferences: Check prefers-reduced-motion media query
• Performance: Use transform and opacity for smooth animations
• Accessibility: Ensure animations don't interfere with user experience
• Consistency: Use consistent animation patterns throughout your app

Configuration

Reduced Motion

The package automatically respects the prefers-reduced-motion user preference:

import { useReducedMotion } from '@foundrykit/animation'

function MyComponent() {
  const shouldReduceMotion = useReducedMotion()
  
  return (
    <motion.div
      animate={shouldReduceMotion ? {} : { scale: 1.1 }}
    >
      Content
    </motion.div>
  )
}

Custom Transitions

Create custom transition configurations:

const customTransition = {
  type: "spring",
  stiffness: 100,
  damping: 10
}

<motion.div transition={customTransition}>
  Content
</motion.div>

Dependencies

• framer-motion - Core animation library
• @foundrykit/types - TypeScript type definitions
• React 19+