Meaningful motion design and how to implement it
summary
Motion must be meaningful not decorative and the workflow is concrete: use Shapeshifter for animated vector drawables, export JSON from After Effects and play it with Lottie, tie states with animated selectors and duplicateParentState, and prefer MotionLayout/ConstraintLayout or TransitionManager for navigation. Practical wins: hard‑code coordinates or biases to “cheat” when randomness is unnecessary, iterate rapidly (multiple iterations in 30 minutes), and the prototype shipped to Google Play and worked well for users.
AI-written summary · about
chapters (17)
- 0:00Start
- 3:13duolingo
- 8:25Design / Storyboard
- 9:36Design / Shapeshifter
- 11:35Handover / Shapeshifter
- 13:15Details
- 16:54Design / Adobe XD
- 19:36Output
- 22:27Design / AfterEffects
- 24:36Animation Handover / Lottie
- 24:59Positioning Handover / Lottie
- 25:21Implementing / Lottie
- 27:03Implementation
- 30:18Design / Sketch
- 30:57Design / Zeplin
- 33:10Get inspired
- 35:09Fast iteration
related talks
43mMeaningful motion design and how to implement it
29mBringing your app to life - Motion Animations everywhere
43mPurpose and Style: Using Motion with Meaning in Interfaces
37mMeaningful Motion in Design
35mMotion In Design Systems
39mAdvanced & Practical MotionLayout
47mLearn Some New Moves: Advanced Android Animation
42mDo the Loco-MotionLayout: Building animations with MotionLayout