Follow-through & overlapping action

When you throw a ball, your arm keeps moving after your hand lets go. The ball doesn't stop the instant it hits the ground; it bounces, rolls, settles. In UI, the equivalent is the subtle overshoot and secondary motion that makes interfaces feel physical rather than mechanical. Ignore follow-through and your animations look like PowerPoint. Apply it carefully and they start to feel like they matter.

#The idea

Follow-through is the principle that motion doesn't stop instantaneously; it overshoots or ripples before settling. Overlapping action is the related idea that multiple elements in a single motion don't all start and stop together; trailing parts lag. Both capture how real-world physics behaves, and more importantly how our visual system expects motion to behave.

In UI, follow-through shows up as:

• Overshoot: an element travels slightly past its destination and settles back. A modal that slides to 102% of its width before landing at 100%. A checkbox that scales to 1.1x before settling at 1.0x.
• Overlapping decay: when a parent element stops, its children continue briefly. A card lifts and sets down, but its shadow takes an extra 50ms to stop pulsing.
• Trailing stagger: a group of elements completes an exit action, but they finish out of sync. First item exits fully, then 30ms later the second, and so on.

Follow-through is what separates a spring from a tween (lesson 4). Springs give it to you for free when you tune damping carefully. With tweens you have to construct it manually.

#When it applies

• Celebratory feedback: save confirmations, likes, successful actions. Overshoot reinforces the sense of completion.
• Physical interactions: drag release, pull-to-refresh, anything where the user's motion has inertia. Follow-through matches that inertia.
• Character moments: playful UI (games, onboarding, empty states). Bounce says alive.
• Multi-element groups: lists of items appearing/disappearing. Overlap turns them from a bulk update into a sequence.

#When it doesn't

• Menus, modals, dropdowns. These should stop crisply at their rest position. Overshoot here reads as imprecision.
• Productivity tools: spreadsheets, IDEs, form-heavy apps. Users are focused on data, not motion character.
• Small, high-frequency elements. A button tap that overshoots 100x a day becomes noise. Reserve follow-through for discrete moments.

#Implementation

Using a spring with low damping for automatic follow-through:

<motion.div
  animate={{ scale: 1 }}
  transition={{
    type: "spring",
    stiffness: 400,
    damping: 12,    // < 20 produces visible overshoot
  }}
/>

Explicit overshoot with a keyframe:

<motion.div
  animate={{ scale: [0.9, 1.1, 1] }}
  transition={{
    duration: 0.4,
    times: [0, 0.6, 1],
    ease: "easeOut",
  }}
/>

Explicit keyframes give you exact control over overshoot amount. Springs give you natural physics but less predictable peak values.

#Craft notes

• Overshoot should be subtle. 5-10% past the target is usually enough. More than 15% reads as a glitch.
• Overlapping action requires a hierarchy. If every element overlaps by the same amount, it's just stagger. True overlap has a heavier parent and lighter children trailing.
• Overshoot is the end; anticipation (lesson 5) is the beginning. Together they bracket a full physical motion.
• If the user can interrupt motion mid-overshoot, use a spring. The spring will re-settle based on new input. A keyframe-based overshoot will awkwardly complete.

#Exercises

1. Tune overshoot amount. Create three versions of the same scale animation: 0% overshoot, 5%, 15%. Judge subjectively which feels alive and which feels broken.
2. Find overlapping action. Watch Apple's "Undo Send" toast appear. Several elements animate together. Which ones trail? By how much?
3. Build a springless overshoot. Using only tweens (no springs), replicate the feel of a spring with damping: 12. What did you learn about why springs exist?

#Study this in the wild

• iOS Control Center drag-to-dismiss. Release partway. Overshoot plus settle is the textbook example.
• Google's loading spinner. Observe the spinner's rotation: the tail lags behind the head. Overlapping action applied to a continuous animation.
• Slack's reaction emoji. The emoji scales in with a tiny overshoot. Subtle, not cartoonish.

#Further reading

• Raphael Salaja: Follow-through in UI.
• Motion: Spring physics.