Shower thought. A lot of the move animations duplicate common code.
What if we could compose animations together, move does move, reveal does reveal, crossfade fades between. Would prove to be a better implementation. Would have to solve combining styles via inline styles + classes.
Some would work naturally (reveal + move), some wouldn't (conceal + move). Need to test.
Example API
import Baba, { Reveal as RevealFromTarget, Move, CrossFade, Target } from 'yubaba';
<Baba name="composing-animations">
<Move>
<RevealFromTarget>
<CrossFade>
{baba => (
<div {...baba} id="container-element">
<Target>{target => <div {...target} id="focal-element" />}</Target>
</div>
)}
</CrossFade>
</RevealFromTarget>
</Move>
</Baba>We can then compose them ourselves so this isn't a breaking change, for example
import { Move, CrossFade } from 'yubaba';
class CrossFadeMove extends React.Component {
render() {
const { children, ...props } = this.props;
return (
<Move {...props}>
<CrossFade {...props}>{children}</CrossFade>
</Move>
);
}
}While we're doing this, also do:
- Set sane defaults for zindex
- Find any opportunities to cleanup animation code
Shower thought. A lot of the move animations duplicate common code.
What if we could compose animations together, move does move, reveal does reveal, crossfade fades between. Would prove to be a better implementation. Would have to solve combining styles via inline styles + classes.
Some would work naturally (reveal + move), some wouldn't (conceal + move). Need to test.
Example API
We can then compose them ourselves so this isn't a breaking change, for example
While we're doing this, also do: