Motion roadmap

[itsdouges]

Two goals for this:

1. Introduce new animations and make a suite of good looking examples, taking inspiration from https://material.io/design/motion
2. Make internal changes if needed for more advanced animations

Move

• [x] Disable scale via prop
• [x] Investigate API to make multi-element animations easier
• [x] Scale inverse via prop or component
• [ ] Move expand example

Focal reveal move

• [x] FocalRevealMove animation
• [x] FocalConcealMove animation
• [x] FocalTarget util
• [x] Email threads example
• [ ] Contact cards example

Arc move

• [ ] Arc move example #92
• [ ] Introduce API for a reveal arc move
• [ ] Reveal arc move example
• [ ] Reveal arc move example 2

Fixed focal cross fade

• [ ] Introduce API to reveal cross fade contents but move focal target
• [ ] Video example
• [ ] Video grid example

Loose focal cross fade

• [ ] Cross fade reveal with focal element example

Fixed cross fade

• [ ] Add ability to disable scaling when move from origin
• [ ] Investigate if we need a new API to cross fade reveal
• [ ] Cross fade reveal example (Slow-mo here)
• [ ] Cross fade example
• [ ] Cross fade reveal example

Material expanding

• [ ] https://twitter.com/i/status/1132899285480042496

Reshaping container

• [x] Add move motion to child elements

Notes

Material motion repo is gold for some animations https://github.com/material-motion/material-motion-swift !

[itsdouges]

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion