Animační principy pro UI micro-interactions

# Micro-interaction: Add to Cart Button Success

## 1. Animation Purpose
**Why:** Poskytuje okamžitý vizuální feedback, že akce byla úspěšná
**UX Benefit:** Reduces user uncertainty, creates moment of delight
**Expected Perception:** "My action was registered and succeeded"

**Type:** Functional feedback with subtle delight moment

## 2. 12 Principles Application

**Squash & Stretch (Subtle):**
- Button briefly scales to 0.95x on click (squash)
- Then bounces to 1.05x before settling (stretch)
- **Why:** Mimics physical button press, feels responsive

**Anticipation:**
- Button shifts down 2px before animation starts
- **Why:** Signals something is about to happen, primes user

**Follow-through:**
- Checkmark icon continues moving slightly after button stops
- **Why:** More natural motion, not robotic

**Overlap (Stagger):**
- Button transform completes at 200ms
- Color change starts at 150ms (50ms overlap)
- Icon appears at 250ms
- **Why:** Creates visual interest, not everything happens at once

**Ease In/Ease Out:**
- Starts fast, slows at end (natural deceleration)
- **Why:** Mimics real-world physics, feels organic

## 3. Timing Specifications

**Total Duration:** 600ms
- Too fast (< 200ms): User misses feedback
- Too slow (> 800ms): Feels sluggish
- 600ms: Sweet spot for "noticed but not annoying"

**Timeline Breakdown:**
```
0ms ──▶ [Anticipation] Button press down
50ms ──▶ [Squash] Scale to 0.95x
150ms ──▶ [Color] Bg starts changing green → teal
200ms ──▶ [Stretch] Scale to 1.05x, bounce
250ms ──▶ [Icon] Checkmark fades in + slides up
400ms ──▶ [Settle] Scale back to 1x
600ms ──▶ [Complete] All animations done
```

**Delay:** 0ms (immediate response to click)

**Stagger:** If multiple items added (bulk action), stagger by 80ms each

## 4. Easing Functions

**Primary Easing: cubic-bezier(0.34, 1.56, 0.64, 1)** (Back ease-out)
- Creates slight overshoot (bounce effect)
- More playful than standard ease-out
- Appropriate for success moment (celebratory)

**Visual Curve Comparison:**
```
Linear: ────────── (robotic)
Ease-out: ─────╮ (decelerates)
Back ease-out: ─────╯──╮ (bounces!) ✓ SELECTED
```

**Alternative for accessibility:**
If user has `prefers-reduced-motion`, use `ease-out` (no bounce)

## 5. State Transitions

**Initial State (Default):**
- Background: #2C5F2D (brand green)
- Text: "Add to Cart"
- Icon: Shopping cart
- Transform: scale(1)

**Intermediate Keyframes:**

**@50ms:** (Squash)
- Transform: scale(0.95) translateY(2px)
- Background: #2C5F2D (unchanged)

**@200ms:** (Stretch peak)
- Transform: scale(1.05)
- Background: #0A7C8C (teal - transitioning)
- Text: Fading out

**@250ms:** (Icon swap)
- Icon: Cart fades out, Checkmark fades in
- Checkmark: translateY(10px) → translateY(0) [slides up]
- Opacity: 0 → 1

**Final State (Success):**
- Background: #0A7C8C (teal - success color)
- Text: "Added!"
- Icon: ✓ Checkmark
- Transform: scale(1)

**Reversibility:**
- Can reverse if user immediately removes item
- Play animation backwards (600ms → 0ms)

## 6. Motion Path

**Button Container:**
- Path: Vertical only (Y-axis)
- Distance: 2px down, 2px up (total 4px travel)
- No rotation

**Checkmark Icon:**
- Path: Vertical slide + fade
- Start: translateY(10px), opacity(0) [below final position]
- End: translateY(0), opacity(1)
- **Why:** Feels like icon is "popping in" from below

**Scale Transform:**
- Origin: center (default)
- Scale: 1 → 0.95 → 1.05 → 1
- Creates "pulse" effect

## 7. Performance Considerations

**GPU-Accelerated Properties (Use These):**
✅ `transform: scale()` (instead of width/height)
✅ `transform: translateY()` (instead of top/bottom)
✅ `opacity` (instead of visibility changes)

**Avoid (Causes Reflow):**
❌ Animating `width`, `height`, `left`, `right`
❌ Animating `margin`, `padding`

**Optimization Techniques:**
```css
.button {
will-change: transform; /* Hint browser to GPU-accelerate */
backface-visibility: hidden; /* Prevents flicker */
}
```

**Frame Rate Target:** 60fps (16.67ms per frame)
- Test on mid-range devices (not just dev machine)
- Use Chrome DevTools Performance tab

**Reduced Motion Support:**
```css
@media (prefers-reduced-motion: reduce) {
.button {
animation: none !important;
transition: background-color 200ms ease-out; /* Color only */
}
}
```

## 8. Code Implementation

### Option A: CSS Animations (Pure CSS)

```css
.add-to-cart-button {
background: #2C5F2D;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.add-to-cart-button.clicked {
animation: buttonSuccess 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes buttonSuccess {
0% {
transform: scale(1) translateY(0);
background: #2C5F2D;
}
8% {
transform: scale(0.95) translateY(2px);
}
33% {
transform: scale(1.05) translateY(0);
background: #0A7C8C;
}
67% {
transform: scale(1);
}
100% {
transform: scale(1);
background: #0A7C8C;
}
}

.button-icon-checkmark {
animation: checkmarkAppear 300ms ease-out 250ms both;
}

@keyframes checkmarkAppear {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
```

### Option B: JavaScript (GSAP)

```javascript
import { gsap } from "gsap";

function animateButtonSuccess(button) {
const tl = gsap.timeline();

tl.to(button, {
scale: 0.95,
y: 2,
duration: 0.05,
ease: \"power2.in\"
})
.to(button, {
scale: 1.05,
y: 0,
backgroundColor: "#0A7C8C",
duration: 0.15,
ease: \"back.out(1.7)\"
})
.to(button.querySelector('.icon'), {
opacity: 0,
duration: 0.1
}, "-=0.1")
.fromTo(button.querySelector('.checkmark'),
{ opacity: 0, y: 10 },
{ opacity: 1, y: 0, duration: 0.3, ease: \"back.out(2)\" }
)
.to(button, {
scale: 1,
duration: 0.2,
ease: \"power2.out\"
});

return tl;
}

// Usage
addToCartButton.addEventListener('click', () => {
animateButtonSuccess(addToCartButton);
});
```

### Option C: React with Framer Motion

```jsx
import { motion } from "framer-motion";

function AddToCartButton() {
const [clicked, setClicked] = useState(false);

return (
<motion.button
onClick={() => setClicked(true)}
animate={clicked ? "success" : "default"}
variants={{
default: {
scale: 1,
backgroundColor: "#2C5F2D"
},
success: {
scale: [1, 0.95, 1.05, 1],
backgroundColor: "#0A7C8C",
transition: {
duration: 0.6,
ease: [0.34, 1.56, 0.64, 1],
times: [0, 0.08, 0.33, 1]
}
}
}}
>
{!clicked ? (
<><ShoppingCart /> Add to Cart</>
) : (
<motion.span
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.25, duration: 0.3 }}
>
<CheckIcon /> Added!
</motion.span>
)}
</motion.button>
);
}
```

## Testing Checklist

✓ Test on 60Hz and 120Hz displays
✓ Verify animation doesn't block UI (button remains clickable)
✓ Test with keyboard navigation (Enter key)
✓ Check reduced motion preference
✓ Test on low-end devices (throttle CPU in DevTools)
✓ Ensure accessibility: Screen reader announces "Added to cart"
✓ Multiple rapid clicks: Animation restarts or queues gracefully
✓ Dark mode: Colors still work

## A/B Test Ideas

**Variant A:** This design (600ms, bounce)
**Variant B:** Simpler (300ms, no bounce, just color change)
**Metric:** User confidence in action (survey + completion rate)