Week 24: Animations & Internationalization

1. CSS Transitions & Keyframes in React

The simplest animation in React is still plain CSS, driven by a class toggled from state — no new dependency, no new mental model, just Week 2's useState controlling which class is applied.

function Toast({ message, visible }: { message: string; visible: boolean }) {
  return (
    <div className={`toast ${visible ? 'toast--visible' : ''}`}>
      {message}
    </div>
  );
}

.toast {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.toast--urgent {
  animation: pulse 1.2s ease-in-out infinite;
}

Notice both examples only ever animate opacity and transform — never width, height, top, or left. The browser can animate transform/opacity entirely on the compositor thread, without re-running layout or paint on every frame. Animating width or top forces the browser to recompute layout on every single frame, which is measurably slower and the single most common cause of janky CSS animations.

2. Framer Motion Fundamentals

Plain CSS handles simple, state-driven transitions well, but breaks down for anything needing to animate out before a component actually unmounts — React removes the DOM node immediately, before a CSS transition has a chance to play. Framer Motion (installed as framer-motion) solves this with motion components and AnimatePresence.

npm install framer-motion

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

function ToastContainer({ toast }: { toast: { id: string; message: string } | null }) {
  return (
    <AnimatePresence>
      {toast && (
        <motion.div
          key={toast.id}
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -12 }}
          transition={{ duration: 0.2 }}
          className="toast"
        >
          {toast.message}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

initial is the state a motion.div animates from on mount, animate is its resting state, and exit is the state it animates to before actually being removed from the DOM. Without AnimatePresence wrapping it, React would unmount toast's DOM node the instant it becomes null, giving exit no chance to run — AnimatePresence is specifically what delays the real unmount until the exit animation finishes.

3. Layout Animations & Gestures

Adding a single layout prop to a motion component makes Framer Motion automatically animate any change to that element's position or size — reordering a list, an accordion expanding, a filter changing how many items render — using the same FLIP (First, Last, Invert, Play) technique you'd otherwise hand-roll.

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

function ReorderableList({ items }: { items: { id: string; label: string }[] }) {
  return (
    <ul>
      <AnimatePresence>
        {items.map((item) => (
          <motion.li
            key={item.id}
            layout                                  // animates position changes automatically
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            whileHover={{ scale: 1.02 }}
            whileTap={{ scale: 0.98 }}
          >
            {item.label}
          </motion.li>
        ))}
      </AnimatePresence>
    </ul>
  );
}

When items reorders or shrinks, every remaining motion.li with layout smoothly animates to its new position instead of snapping there instantly — Framer Motion measures each element's position before and after the re-render and interpolates between them. whileHover and whileTap are declarative gesture props: state that only applies while the corresponding pointer interaction is active, no manual onMouseEnter/ onMouseLeave state tracking required.

4. Respecting prefers-reduced-motion

Some users — for vestibular disorders, motion sensitivity, or simple preference — set their OS to request reduced motion. This isn't a style preference to politely consider; large or fast motion can trigger real physical symptoms for some users, which is why it's treated as an accessibility requirement, on the same tier as Week 23's keyboard support.

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

function AnimatedPanel({ children }: { children: React.ReactNode }) {
  const shouldReduceMotion = useReducedMotion();

  return (
    <motion.div
      initial={shouldReduceMotion ? { opacity: 0 } : { opacity: 0, x: 40 }}
      animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, x: 0 }}
      transition={{ duration: shouldReduceMotion ? 0.01 : 0.3 }}
    >
      {children}
    </motion.div>
  );
}

useReducedMotion() reads the prefers-reduced-motion media query reactively and returns true when the user has requested it. Rather than disabling the animation outright (which can feel visually abrupt), the pattern above keeps a fade for continuity but drops the large positional slide — motion that communicates state change without the large-scale movement that's the actual problem for sensitive users.

5. Internationalization with react-i18next

Internationalization (i18n) separates user-facing text from your components entirely, so the same UI can render in any language by swapping which translation file is active — no hardcoded English strings scattered across the codebase.

npm install react-i18next i18next

{
  "greeting": "Hello, {{name}}!",
  "cartItems_one": "{{count}} item in your cart",
  "cartItems_other": "{{count}} items in your cart"
}

{
  "greeting": "¡Hola, {{name}}!",
  "cartItems_one": "{{count}} artículo en tu carrito",
  "cartItems_other": "{{count}} artículos en tu carrito"
}

import { useTranslation } from 'react-i18next';

function CartSummary({ userName, itemCount }: { userName: string; itemCount: number }) {
  const { t } = useTranslation();

  return (
    <div>
      <p>{t('greeting', { name: userName })}</p>
      <p>{t('cartItems', { count: itemCount })}</p>
    </div>
  );
}

t('greeting', { name: userName }) interpolates userName into the {'{{name}}'} placeholder from the active locale's JSON file. cartItems_one/cartItems_other is i18next's pluralization convention — t('cartItems', { count }) automatically picks the right key based on count, which matters because pluralization rules genuinely differ by language (some languages have more than two plural forms), not something you can hand-roll with a single count === 1 ? singular : plural ternary and expect to generalize.

6. Locale Routing & Formatting

Translated strings are only half the problem — dates, currency, and numbers also follow locale-specific conventions (decimal separators, currency symbol placement, date order) that are easy to get subtly wrong by hand-formatting them yourself.

const price = 1234.5;
const date = new Date();

new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(price);
// "$1,234.50"

new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(price);
// "1.234,50 €"

new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(date);
// "August 5, 2026"

new Intl.DateTimeFormat('ja-JP', { dateStyle: 'long' }).format(date);
// "2026年8月5日"

Intl.NumberFormat and Intl.DateTimeFormat are built into every JavaScript engine and encode the actual formatting rules for every supported locale — separator placement, symbol position, calendar conventions — correctly, which a hand-written `$${price.toFixed(2)}` simply can't do once a non-US locale is involved.

For a Next.js app (Weeks 18–19), next-intl extends this to full locale-prefixed routing — /en/products, /es/products — with middleware that detects a visitor's preferred locale and redirects accordingly, and a useTranslations hook mirroring react-i18next's useTranslation API for Server and Client Components alike.

Right-to-left languages (Arabic, Hebrew) need one more layer: setting dir="rtl" on the root element flips the reading direction, but a stylesheet hardcoded with margin-left/padding-right won't flip with it. Logical CSS properties — margin-inline-start instead of margin-left, padding-inline-end instead of padding-right — describe "start" and "end" relative to the current reading direction, so the same stylesheet works correctly in both LTR and RTL without a separate RTL override file.

7. Hands-on Exercise

8. Knowledge Check

Four quick questions. Expand each to check your answer.