set options from DOM for animations

[faroutchris]

Get animation options from DOM

data-compounds-animation="fadeDown"
data-compounds-animation-duration="300"
data-compounds-animation-easing="easeInOut"
data-compounds-animation-iterations="1"

makeAnimation() returns two animations corresponding to the name passed in, ie "fadeDown". type { in: Animation, out: Animation }

This api for animations is just a wrapper for Web Animations API

[faroutchris]

I'm holding off a bit on this one, I'm playing around with resuming and cancelling animations properly, which this api doesn't do well currently.

I have a draft I'm working on but it changes a bit of the api surface. But it might actually make it a lot easier to work with as well.

I'm thinking animate(element, options).moveY(100).rotate(180). And if you chain a new animation on the element, it resumes from its current position and correct duration.

[faroutchris]

Finally done, the api seems pretty easy to use at this point.

• Animations are stackable, reversable and cancelable, resumes correctly from whatever the current state is
• Custom easings
• Uses DOM data attributes to get animation options
• Lifecycle callbacks during playback
• Since the underlying api is web animations it runs in a separate thread

@thisisphan @calebgasser

[cyanff]

Very nice! It looks great.