Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Introduction to Web Animations

Slide 4

Slide 4 text

CSS3 + SVG Towards a 
 Unified Web Animation Model

Slide 5

Slide 5 text

All of today’s animation technologies have some issues…

Slide 6

Slide 6 text

CSS + Hardware accelerated (partially) - Hard to control dynamically

Slide 7

Slide 7 text

requestAnimationFrame() + Good support, optimizable - Performance issues

Slide 8

Slide 8 text

window.setInterval() $.animate() + Simple - Imprecise, bad performance

Slide 9

Slide 9 text

Libraries (e.g. GSAP) + Good performance, cross- browser - Dependency on external libs

Slide 10

Slide 10 text

Web Animation API
 to the rescue!

Slide 11

Slide 11 text

One JavaScript API to control Animations

Slide 12

Slide 12 text

element.animate( KeyframeEffects, AnimationEffectTiming ) : Animation Core Objects

Slide 13

Slide 13 text

Example 1 element.animate();

Slide 14

Slide 14 text

Animation properties: .pause() / .play() .cancel() / .finish() .playState .playbackRate .currentTime .oncancel / .onfinish Example 2

Slide 15

Slide 15 text

Multiple parallel Animations Example 3

Slide 16

Slide 16 text

Animating with advanced CSS: motion-path motion-offset motion-rotation Example 4

Slide 17

Slide 17 text

• Promises (ready, finished) • GroupEffects • SequenceEffects There’s more…

Slide 18

Slide 18 text

Awesome! …when can I use it?

Slide 19

Slide 19 text

Default support http://caniuse.com/#feat=web-animation

Slide 20

Slide 20 text

Polyfill https://github.com/web-animations/web- animations-js

Slide 21

Slide 21 text

Discussion

Slide 22

Slide 22 text

Thank you! @beheist https://speakerdeck.com/beheist

Slide 23

Slide 23 text

Sources & Resources • http://danielcwilson.com/blog/2015/07/animations-intro/ • http://danielcwilson.com/tags/web-animations-api/ • https://github.com/web-animations/web-animations-codelabs • https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API • https://www.youtube.com/watch?v=WaNoqBAp8NI • https://www.youtube.com/watch?v=ep0_0W0qWsc • http://web-animations.github.io/web-animations-demos/ • https://developers.google.com/web/updates/2015/10/web-animations- resources