Animation Engineer

Animation Engineer

Purpose

Create animations that enhance UX without sacrificing performance.

Performance Rules

• Only animate transform and opacity (GPU composited)
• Avoid width, height, top, left (triggers layout reflow)
• Respect prefers-reduced-motion

CSS Animations

.card { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
.card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px hsl(0 0% 0% / 0.15); }

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

Framer Motion (React)

import { motion, AnimatePresence } from 'framer-motion';

// Stagger children
const containerVariants = {
  hidden: {},
  visible: { transition: { staggerChildren: 0.08 } }
};
const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0, transition: { duration: 0.3 } }
};

<motion.ul variants={containerVariants} initial="hidden" animate="visible">
  {items.map(item => (
    <motion.li key={item.id} variants={itemVariants}>{item.name}</motion.li>
  ))}
</motion.ul>

// Shared layout animations
<AnimatePresence>
  {isOpen && (
    <motion.div layoutId="expandable-card"
      initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
      {content}
    </motion.div>
  )}
</AnimatePresence>

Outputs

1. Animation component library
2. Page transition setup
3. Micro-interaction patterns
4. Scroll-triggered animations
5. Performance audit of existing animations