The post-Flash era is hardly free of animation. CSS animation is quickly becoming a cornerstone of user-friendly UI frameworks, and JavaScript libraries already exist to handle complex, interactive animations. And now there’s a new API coming to town specifically for web animations! In the wake of so much “CSS vs. JavaScript animation” infighting, you'll be introduced to the Web Animations API via the development styles and insights of four distinct groups of people: UI designers, interaction developers, library authors, and the browser teams implementing it.

1. with @RachelNabors
State of the
Animation
the

2. RachelNabors.com/archive

6. All characters appearing in this work are
fictitious. Any resemblance to real
persons, living or dead, is purely
coincidental.

7. WEB ANIMATION
HAS JUST BEGUN
Flash may be gone, but the era of

8. Animation is a
visual representation of a
rate of change over time
and space.
1me
loca1on

9. User Interface
Designers

10. Relationships Structure Cause & Effect
Anima1on guides users through interac1ons using…

12. Sco$ E. Hudson and John T. Stasko (1993)
“By offloading interpretation of changes to the
perceptual system, animation allows the user to
continue thinking about the task domain, with no
need to shift contexts to the interface domain. By
eliminating sudden visual changes, animation lessens
the chance that the user is surprised.”

13. Interac/on
Developers

17. Animation is coming
(back)

18. Kinds of
Animation

19. Sta1c Anima1ons

21. Stateful Anima1ons

22. UI credit: codrops.com

24. Dynamic Anima1ons

25. Credit: CrowdStrike: Alex Graul, Senior UI Developer

26. Multiple States
vs.
Dynamic
Animation

27. Mul1-­‐state
Anima1on

28. True Dynamic
Anima1on

29. .loaded-001 .loading-bar { width: 1%; }
.loaded-002 .loading-bar { width: 2%; }
.loaded-003 .loading-bar { width: 3%; }
Ad nauseum.

31. Declarative
vs.
Reactive

32. .spinner {
transition: opacity 1s;
opacity: 1;
}
.loaded .spinner { opacity: 0; }
Declara1ve CSS…

33. window.addEventListener("load", function load(event){
window.removeEventListener("load", load, false);
body.classList.add("loaded");
},false);
spinner.addEventListener("transitionend", removeSpinner, true);
+ Reac1ve JavaScript

34. Credit: Square: Madelin Woods

35. Credit: Square: Madelin Woods

36. I can’t make a physics
engine with that.
This totally
works!

38. Anima/on Library
Developers

39. greensock.com/gsap

40. VelocityJS.org

41. And then we can
release it to the public?
Sure, right after
we catch up on
client work!

42. Animation History
The Fall of
Flash

45. ?

47. THE WEB
ANIMATION API
the Greatest API You’ve Never Heard of
an

48. Anima/on Spec
Authors &
Implementors

49. youtube.com/watch?v=9aKAQ3OTxUU

50. But does
it have…
• Performant anima6ons
• Mo6on Paths
• Callbacks
• Nes6ng & sequencing
• Pause, play, reverse, seek

51. • Performant anima6ons
• Mo6on Paths
• Callbacks
• Nes6ng & sequencing
• Pause, play, reverse, seek
Well, actually,
it does!

52. codepen.io/rachelnabors/pen/zxYexJ

53. I think I looked at it once.
It was kinda long,
wasn’t it?
Web Animation API?
What’s that?
Meh. It’s been
a few years.

54. Support

55. birtles.github.io/areweanimatedyet

56. It’s “under
consideration.”
…

57. Will no one think
of the tablets?

58. github.com/web-­‐anima1ons

60. github.com/web-­‐anima1ons

61. Performance

62. engineering.flipboard.com/2015/02/mobile-­‐web

63. Frame rate
is an accessibility
issue.
Think of the
accessibility!

64. • Web Anima6on API anima6ons geEng their own
thread!*
• *So long as the anima6on doesn’t 6e into any
things happening on the main thread like:
• JavaScript (sorry dynamic anima6on)
• Layout
• It varies by vendor.
An end to jank (some condi1ons apply)!

65. csstriggers.com

66. • Reflows are a rendering engine problem.
• opacity & transform remain safest bet
• Browsers keep trying…
• See also: Google’s Project Ganesh and Mozilla’s
Servo
Ge]ng around layout

67. • The CSS property will-change is a start
• Promotes things to their own layer
• The end of translateZ(0)
Shortcut through the GPU

68. FORWARD
Pushing the web (anima@ons)

69. Browser support
and performance!Tools!
We need a
timeline!
The standardistas
need to come down
from their ivory towers!
Show them
how well it
performs!

71. What would you
know about our
problems?
Why won’t you give
us a chance?

72. Animation is coming,
whether we’re ready
or not.

73. Here’s the plan.

74. User Interface
Designers
• Don’t be afraid of JavaScript
• Take 6me to play with the
libraries

75. Interac/on
Developers
• Check out the polyfill’s page
• Give feedback

76. Anima/on Library
Developers
• Go read the spec
• Give feedback

77. Anima/on Spec
Authors &
Implementors
• Find be[er ways of taking
feedback
• Meet us in the field

78. Everyone.

79. –John Lasseter, CCO Pixar
“The art challenges the technology, and
the technology inspires the art.”

80. We are not our tools.

81. You can talk to me.
Special Announcement

82. Ongoing coverage at WebAnima6onWeekly.com
@RachelNabors | RachelNabors.com
rachelnabors.com/waapi
#waapi