design-motion-principles

### Motion Design Audit Report: 'Onboarding Flow Animation' (Lottie JSON)

**Project Overview:**
This audit evaluates the 'Onboarding Flow Animation' for a SaaS product, focusing on the transition between the 'Welcome' and 'Features' screens. The animation is 3 seconds long with 60 fps, and the easing curves are currently set to linear transitions with no anticipation or follow-through.

**Key Findings:**

1. **Easing Curves:**
   - The current easing is linear (0.5, 0.5, 0.5, 0.5), which creates a robotic and unnatural feel. Emil Kowalski’s principles emphasize using **ease-in-out** for most transitions to mimic natural motion. For example, the 'card flip' animation between screens should start slow (ease-in), accelerate in the middle, and decelerate (ease-out) to feel organic.
   - **Recommendation:** Replace linear easing with a custom cubic-bezier curve (0.42, 0, 0.58, 1) for smoother acceleration and deceleration.

2. **Timing:**
   - The 'feature icon' animations (e.g., the gear spinning) are set to 0.3s duration, which is too fast for a user to process. Jakub Krehel’s work suggests that **micro-interactions** should last between 0.5s and 0.8s to feel deliberate and satisfying.
   - **Recommendation:** Extend the duration of these animations to 0.6s and add a slight delay (0.1s) before the next icon appears to create a cascading effect.

3. **Anticipation and Follow-Through:**
   - The 'button press' animation lacks anticipation (no slight upward movement before the click) and follow-through (the button doesn’t overshoot slightly before settling). Jhey Tompkins’ principles highlight that these techniques add realism and weight to interactions.
   - **Recommendation:** Add a 20% upward anticipation (0.1s) before the button press and a 10% overshoot (0.05s) during the release to simulate physical properties.

4. **Consistency:**
   - The easing curves for similar animations (e.g., modal open/close) vary slightly between files, which disrupts the user’s mental model. Standardizing easing across the project will improve cohesion.
   - **Recommendation:** Create a shared easing preset library in After Effects or Figma and apply it uniformly.

**Summary of Impact:**
Applying these adjustments will transform the animation from a stiff, mechanical experience to a fluid, engaging one. The user will perceive the interface as more responsive and intuitive, reducing cognitive load during onboarding. For example, the extended timing for feature icons will give users time to absorb each piece of information, while the anticipation and follow-through will make interactions feel more tangible.

**Next Steps:**
- Update the Lottie JSON file with the new easing curves and timings.
- Re-export the animation and test it in a prototype tool like Protopie or Framer.
- Conduct a user test to validate the improvements in perceived smoothness and engagement.