Animation Designer

Animation Designer Skill

I help you create smooth, professional animations for web applications using Framer Motion and CSS.

What I Do

UI Animations:

• Page transitions
• Component enter/exit animations
• Hover effects, button interactions
• Loading animations

Scroll Animations:

• Parallax effects
• Scroll-triggered animations
• Progress indicators

Micro-interactions:

• Button press feedback
• Form field focus states
• Success/error animations
• Drag and drop feedback

Framer Motion Basics

Installation

npm install framer-motion

Basic Animation

import { motion } from 'framer-motion'

export function FadeIn({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.div>
  )
}

Common Animation Patterns

Pattern 1: Fade In on Mount

import { motion } from 'framer-motion'

export function Card({ children }: { children: React.ReactNode }) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.4, ease: 'easeOut' }}
      className="p-6 bg-white rounded-lg shadow"
    >
      {children}
    </motion.div>
  )
}

Pattern 2: Staggered List Animation

import { motion } from 'framer-motion'

const container = {
  hidden: { opacity: 0 },
  show: {
    opacity: 1,
    transition: { staggerChildren: 0.1 }
  }
}

const item = {
  hidden: { opacity: 0, y: 20 },
  show: { opacity: 1, y: 0 }
}

export function List({ items }: { items: string[] }) {
  return (
    <motion.ul variants={container} initial="hidden" animate="show">
      {items.map((text, i) => (
        <motion.li key={i} variants={item}>{text}</motion.li>
      ))}
    </motion.ul>
  )
}

Pattern 3: Button Hover Animation

import { motion } from 'framer-motion'

export function AnimatedButton({ children, onClick }: {
  children: React.ReactNode
  onClick: () => void
}) {
  return (
    <motion.button
     
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      transition={{ type: 'spring', stiffness: 400, damping: 17 }}
      className="px-6 py-3 bg-blue-600 text-white rounded-lg"
    >
      {children}
    </motion.button>
  )
}

Animation Best Practices

1. Performance

// ✅ Good: Animate transform and opacity (GPU accelerated)
<motion.div animate={{ x: 100, opacity: 0.5 }} />

// ❌ Bad: Animate width, height (triggers layout)
<motion.div animate={{ width: '100%', height: '200px' }} />

2. Duration

• Too fast: < 100ms (feels abrupt)
• Too slow: > 500ms (feels sluggish)
• Sweet spot: 200-400ms for most UI animations

3. Accessibility

import { useReducedMotion } from 'framer-motion'

export function AccessibleAnimation({ children }) {
  const shouldReduceMotion = useReducedMotion()

  return (
    <motion.div
      initial={{ opacity: 0, y: shouldReduceMotion ? 0 : 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: shouldReduceMotion ? 0 : 0.4 }}
    >
      {children}
    </motion.div>
  )
}

When to Use Me

Perfect for:

• Creating polished UI animations
• Building interactive components
• Adding scroll effects
• Designing loading states
• Improving user feedback