FoundryKit

Animation Components

Complete reference for all FoundryKit animation components

Animation Components

FoundryKit animation components provide smooth, performant animations built on top of Framer Motion.

Entrance Animations

FadeIn

Fade in elements with opacity transitions.

import { FadeIn } from '@foundrykit/animation'

function FadeInExample() {
  return (
    <FadeIn>
      <div className="p-6 bg-white rounded-lg shadow">
        <h2 className="text-2xl font-bold mb-4">Welcome</h2>
        <p className="text-gray-600">
          This content will fade in smoothly when the component mounts.
        </p>
      </div>
    </FadeIn>
  )
}

Props:

  • delay - Delay before animation starts (default: 0)
  • duration - Animation duration in seconds (default: 0.6)
  • easing - Easing function (default: "ease-out")
  • children - React children to animate

Features:

  • Smooth opacity transitions
  • Configurable timing
  • Accessibility support
  • Reduced motion respect

SlideUp

Slide elements up from below with transform animations.

import { SlideUp } from '@foundrykit/animation'

function SlideUpExample() {
  return (
    <div className="space-y-4">
      <SlideUp delay={0}>
        <h1 className="text-3xl font-bold">Main Title</h1>
      </SlideUp>
      
      <SlideUp delay={0.2}>
        <p className="text-lg text-gray-600">Subtitle with delay</p>
      </SlideUp>
      
      <SlideUp delay={0.4}>
        <button className="px-4 py-2 bg-blue-600 text-white rounded">
          Action Button
        </button>
      </SlideUp>
    </div>
  )
}

Props:

  • delay - Delay before animation starts (default: 0)
  • duration - Animation duration in seconds (default: 0.6)
  • easing - Easing function (default: "ease-out")
  • distance - Slide distance in pixels (default: 20)
  • children - React children to animate

Features:

  • Transform-based animations
  • Configurable slide distance
  • Smooth easing
  • Performance optimized

Scale

Scale elements from 0 to full size with transform animations.

import { Scale } from '@foundrykit/animation'

function ScaleExample() {
  return (
    <div className="space-y-4">
      <Scale>
        <button className="px-6 py-3 bg-blue-600 text-white rounded-lg">
          Scaled Button
        </button>
      </Scale>
      
      <Scale delay={0.2} duration={0.8}>
        <div className="p-4 bg-green-100 rounded">
          Slower scale animation
        </div>
      </Scale>
    </div>
  )
}

Props:

  • delay - Delay before animation starts (default: 0)
  • duration - Animation duration in seconds (default: 0.6)
  • easing - Easing function (default: "ease-out")
  • from - Starting scale value (default: 0)
  • to - Ending scale value (default: 1)
  • children - React children to animate

Features:

  • Scale transform animations
  • Configurable scale range
  • Interactive feedback
  • Smooth transitions

Layout Animations

Stagger

Animate multiple children with staggered timing.

import { Stagger } from '@foundrykit/animation'

function StaggerExample() {
  const items = [
    'First item',
    'Second item', 
    'Third item',
    'Fourth item',
    'Fifth item'
  ]

  return (
    <Stagger>
      {items.map((item, index) => (
        <div key={index} className="p-4 bg-gray-100 rounded mb-2">
          {item}
        </div>
      ))}
    </Stagger>
  )
}

Props:

  • delay - Delay before first animation starts (default: 0)
  • staggerDelay - Delay between each child animation (default: 0.1)
  • duration - Animation duration for each child (default: 0.6)
  • easing - Easing function (default: "ease-out")
  • animation - Animation type: "fade" | "slide" | "scale" (default: "fade")
  • children - React children to animate

Features:

  • Staggered timing
  • Multiple animation types
  • Configurable delays
  • Performance optimized

Advanced Usage Examples

Complex Animation Sequences

import { FadeIn, SlideUp, Scale, Stagger } from '@foundrykit/animation'

function ComplexAnimationSequence() {
  return (
    <div className="space-y-8">
      {/* Hero section with fade in */}
      <FadeIn duration={1}>
        <div className="text-center py-12">
          <h1 className="text-4xl font-bold mb-4">Welcome to Our Platform</h1>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
            Build amazing applications with our comprehensive toolkit.
          </p>
        </div>
      </FadeIn>
      
      {/* Feature cards with staggered slide up */}
      <Stagger animation="slide" staggerDelay={0.2}>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="p-6 bg-white rounded-lg shadow">
            <h3 className="text-lg font-semibold mb-2">Feature 1</h3>
            <p className="text-gray-600">Description of feature 1</p>
          </div>
          <div className="p-6 bg-white rounded-lg shadow">
            <h3 className="text-lg font-semibold mb-2">Feature 2</h3>
            <p className="text-gray-600">Description of feature 2</p>
          </div>
          <div className="p-6 bg-white rounded-lg shadow">
            <h3 className="text-lg font-semibold mb-2">Feature 3</h3>
            <p className="text-gray-600">Description of feature 3</p>
          </div>
        </div>
      </Stagger>
      
      {/* CTA button with scale animation */}
      <div className="text-center">
        <Scale delay={1.5} duration={0.8}>
          <button className="px-8 py-4 bg-blue-600 text-white rounded-lg text-lg font-semibold hover:bg-blue-700">
            Get Started
          </button>
        </Scale>
      </div>
    </div>
  )
}

Interactive Animations

import { Scale, FadeIn } from '@foundrykit/animation'
import { useState } from 'react'

function InteractiveAnimations() {
  const [isVisible, setIsVisible] = useState(false)
  const [clickCount, setClickCount] = useState(0)

  return (
    <div className="space-y-6">
      {/* Toggle visibility */}
      <button 
        onClick={() => setIsVisible(!isVisible)}
        className="px-4 py-2 bg-gray-600 text-white rounded"
      >
        {isVisible ? 'Hide' : 'Show'} Content
      </button>
      
      {/* Conditionally animated content */}
      {isVisible && (
        <FadeIn duration={0.5}>
          <div className="p-6 bg-green-100 rounded">
            <h3 className="text-lg font-semibold mb-2">Animated Content</h3>
            <p>This content fades in when you click the button above.</p>
          </div>
        </FadeIn>
      )}
      
      {/* Interactive scale button */}
      <div className="text-center">
        <Scale>
          <button 
            onClick={() => setClickCount(prev => prev + 1)}
            className="px-6 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
          >
            Clicked {clickCount} times
          </button>
        </Scale>
      </div>
    </div>
  )
}

Responsive Animations

import { FadeIn, SlideUp } from '@foundrykit/animation'
import { useMediaQuery } from '@foundrykit/hooks'

function ResponsiveAnimations() {
  const isMobile = useMediaQuery('(max-width: 768px)')
  const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')

  // Disable animations for reduced motion preference
  if (prefersReducedMotion) {
    return (
      <div className="space-y-4">
        <h1 className="text-3xl font-bold">Welcome</h1>
        <p className="text-lg text-gray-600">Content without animations</p>
        <button className="px-4 py-2 bg-blue-600 text-white rounded">
          Action Button
        </button>
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <FadeIn duration={isMobile ? 0.3 : 0.6}>
        <h1 className="text-3xl font-bold">Welcome</h1>
      </FadeIn>
      
      <SlideUp 
        delay={isMobile ? 0.1 : 0.2}
        duration={isMobile ? 0.4 : 0.6}
        distance={isMobile ? 10 : 20}
      >
        <p className="text-lg text-gray-600">Content with responsive animations</p>
      </SlideUp>
      
      <SlideUp 
        delay={isMobile ? 0.2 : 0.4}
        duration={isMobile ? 0.4 : 0.6}
      >
        <button className="px-4 py-2 bg-blue-600 text-white rounded">
          Action Button
        </button>
      </SlideUp>
    </div>
  )
}

Animation Composition

Combining Multiple Animations

import { FadeIn, SlideUp, Scale, Stagger } from '@foundrykit/animation'

function CombinedAnimations() {
  return (
    <div className="space-y-8">
      {/* Main content with fade in */}
      <FadeIn duration={1}>
        <div className="text-center">
          <h1 className="text-4xl font-bold mb-4">Our Services</h1>
          <p className="text-xl text-gray-600">Choose from our comprehensive offerings</p>
        </div>
      </FadeIn>
      
      {/* Service cards with staggered animations */}
      <Stagger animation="slide" staggerDelay={0.15}>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => (
            <div key={index} className="p-6 bg-white rounded-lg shadow">
              <div className="text-center mb-4">
                <Scale delay={0.5 + index * 0.1}>
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
                    <span className="text-2xl">{service.icon}</span>
                  </div>
                </Scale>
              </div>
              <h3 className="text-lg font-semibold text-center mb-2">{service.title}</h3>
              <p className="text-gray-600 text-center">{service.description}</p>
            </div>
          ))}
        </div>
      </Stagger>
    </div>
  )
}

const services = [
  { icon: '🚀', title: 'Fast Development', description: 'Build quickly with our tools' },
  { icon: '🎨', title: 'Beautiful Design', description: 'Create stunning interfaces' },
  { icon: '⚡', title: 'High Performance', description: 'Optimized for speed' },
  { icon: '🔒', title: 'Secure', description: 'Built with security in mind' },
  { icon: '📱', title: 'Responsive', description: 'Works on all devices' },
  { icon: '🛠️', title: 'Customizable', description: 'Adapt to your needs' }
]

Conditional Animation Rendering

import { FadeIn, SlideUp } from '@foundrykit/animation'
import { useState, useEffect } from 'react'

function ConditionalAnimationRendering() {
  const [shouldAnimate, setShouldAnimate] = useState(false)
  const [data, setData] = useState(null)

  useEffect(() => {
    // Simulate data loading
    const timer = setTimeout(() => {
      setData(['Item 1', 'Item 2', 'Item 3'])
      setShouldAnimate(true)
    }, 1000)

    return () => clearTimeout(timer)
  }, [])

  if (!data) {
    return (
      <div className="p-6 bg-gray-100 rounded">
        Loading...
      </div>
    )
  }

  return (
    <div className="space-y-4">
      <FadeIn>
        <h2 className="text-2xl font-bold">Loaded Data</h2>
      </FadeIn>
      
      {shouldAnimate && (
        <div className="space-y-2">
          {data.map((item, index) => (
            <SlideUp key={index} delay={index * 0.1}>
              <div className="p-4 bg-white rounded border">
                {item}
              </div>
            </SlideUp>
          ))}
        </div>
      )}
    </div>
  )
}

Next Steps