--- name: follow-through-overlapping description: Use when animating multi-part objects, character appendages, fabric, hair, or any motion requiring realistic drag, momentum, and settling behavior. --- # Follow Through & Overlapping Action Mastery ## The Momentum Principle Nothing stops all at once. When a character halts, their hair keeps moving. When a car brakes, passengers lurch forward. Follow through and overlapping action capture how different parts of a system respond to forces at different rates—the principle that makes animation feel physically grounded. ## Core Theory: Two Related Concepts **Follow Through**: When the main body stops, appendages continue moving due to momentum, then settle. The termination behavior of motion. **Overlapping Action**: Different parts move at different rates throughout motion, not just at stops. Hair doesn't start moving when the head starts—it drags behind, then catches up. The continuous offset of timing. ## The Drag Hierarchy Parts further from the root of motion drag more: 1. **Root** (hips, torso): Moves first, stops first 2. **Primary extensions** (limbs, head): Slight delay 3. **Secondary extensions** (hands, facial features): More delay 4. **Tertiary elements** (fingers, hair, cloth): Maximum drag Each level follows the previous, creating cascading waves of motion. ## Physical Properties Affecting Drag - **Mass**: Heavier elements have more follow through - **Flexibility**: Softer materials show more overlapping action - **Air resistance**: Flat/wide surfaces drag more - **Attachment point**: Loose connections create greater offset ## Interaction with Other Principles **Timing defines follow through duration**: Fast stops = long follow through; slow stops = subtle settling. **Arcs govern the follow through path**: Appendages swing through curved trajectories, not linear ones. **Secondary action is often follow through**: The supporting motion that enriches without distracting. **Squash/stretch appears in settling**: Objects compress slightly when follow through terminates. ## Domain Applications ### UI/Motion Design - List scrolling: inertial continuation past finger release - Card stacks: sequential settling with offset timing - Modal dismissal: background elements settle after foreground - Pull-to-refresh: elastic overshoot and return - Notification badges: bounce and settle on count change ### Character Animation - Hair and cloth simulation: constant overlapping action - Tail motion: follows body path with significant delay - Facial features: cheeks, jowls follow head rotation - Walk cycles: arm swing offsets from leg timing - Jump landing: body compresses, then appendages catch up ### Logo and Typography - Word reveals: letters arrive with staggered settling - Logo builds: elements land sequentially, each with follow through - Kinetic typography: phrases move with internal timing offsets ### Physics-Based UI - Drag and drop: object continues briefly past release point - Elastic boundaries: content follows finger, then snaps back - Spring animations: natural overshoot and settling ## Common Mistakes 1. **Everything stopping simultaneously**: Creates robotic, mechanical feel 2. **Excessive follow through**: Elements feel disconnected, floaty 3. **No hierarchy**: All parts moving with same delay 4. **Linear settling**: Follow through should ease out, not stop abruptly ## The Stagger Formula For believable overlapping action, offset secondary elements by 2-4 frames (at 24fps) per level of hierarchy. Root moves on frame 1, primary on frame 2-3, secondary on frame 4-6, tertiary on frame 6-10. ## The Settling Curve Follow through should never snap to rest. Use ease-out curves with slight overshoot: - Quick initial movement past rest position - Slower return toward rest - Possible micro-overshoot in opposite direction - Final ease to stillness ## Implementation Heuristic Identify all elements that could move independently. Assign each a drag value based on mass, flexibility, and distance from root. Apply timing offsets proportional to drag. Add settling oscillation to termination. When motion feels stiff, you probably need more overlapping action. --- Source attribution: dylantarre Original project: https://github.com/dylantarre/animation-principles/blob/83597134ba8ff59838270f94d7ac7282ffa3b54d/skills/11-by-principle-focus/follow-through-overlapping/SKILL.md License: MIT License information: https://opensource.org/license/mit Original upstream instructions; downloaded from Dave AI. ## Upstream license notice MIT License Copyright (c) 2024 Dylan Tarre Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Dave AI resource metadata Creator / publisher: dylantarre Original project: https://github.com/dylantarre/animation-principles/blob/83597134ba8ff59838270f94d7ac7282ffa3b54d/skills/11-by-principle-focus/follow-through-overlapping/SKILL.md Attribution basis: Recovered original package and original project license at a pinned revision Fields of work: Design Roles: Motion Designer, Product Designer, UX Designer Specialties: Cross Platform, Design Tools: Adobe Creative Suite, Figma Country applicability: Country not specified Classification basis: Source catalog labels Instruction SHA-256: ea575504797c32d58e5d6e6fef2fdfc5f8b60dbf785133f3af1edfc52f2fc42a Metadata reviewed: 2026-10-27 This metadata supersedes earlier Dave AI catalog attribution. Original instruction and supporting files are preserved.