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