element-motion
element-motion copied to clipboard
Motion roadmap
Two goals for this:
- Introduce new animations and make a suite of good looking examples, taking inspiration from https://material.io/design/motion
- 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
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
Notes
Material motion repo is gold for some animations https://github.com/material-motion/material-motion-swift !
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion