ALEX DANILO: Hi!
I'm Alex Danilo from the Google Developer Relations team.
One of the things I found really hard as a web developer
is making compelling animations on a site.
It seems easy enough at first to throw some CSS animations
onto a site, and then watch the browser fly stuff around you,
and you feel all chuffed when you first see it.
But if you're like me, you want to make your site really
stand out, you know, be memorable.
Not just another pre-canned clone of something people
have already seen.
So I started experimenting with different web animation
techniques, and right away hit problems
with doing fancy things.
For example, I wanted to make two things animate
in perfect sync, but couldn't find a way
to do it really easily.
My solution took 1,000 lines of code, was extremely choppy,
and riddled with jank.
If only there was a better way.
Now this is the kind of thing I wanted to build,
a 3D [INAUDIBLE] [INAUDIBLE] view of the world,
with silky smooth jank-free animation, and total control.
Well, now there is a better way.
A bunch of browser writers and animation experts
got together a couple of years ago
to look at this with a fresh set of eyes, lots of eyes, in fact.
We spent a lot of time discussing
what web developers need, how animation designers work,
and a whole lot more.
What we came up with is Web Animations 1.0.
We aim to take all the existing web animation
primitives out there, and unify them.
And also bring new capabilities that weren't just
more powerful, but would run faster and smoother
as a result.
Now one of the best APIs to play with animation from JavaScript
is, of course, requestAnimationFrame,
especially if you want to fine-grained control
of everything that's happening on a frame-by-frame basis.
So let's take a quick look at how animation
works when you use requestAnimationFrame.
Now using requestAnimationFrame gives great control,
but forces JavaScript execution on every frame.
Now this is fine if you're not doing much in your JavaScript.
But we only have 16 milliseconds for each frame.
And that includes paint and layout time, too.
So if you run out of time, you know what happens?
Skipped frames, resulting in jank,
which some people call jitter.
Now this is the main reason it's a good idea
to decouple the animations from JavaScript execution itself.
So we wanted the flexibility of control
from JavaScript, but not the jank.
And so this is what we designed.
The Web Animations API lets you create animations
from JavaScript, then offload the animation calculations
to the browser, so it can take care
of all the heavy lifting for you.
And in many cases, it can take advantage
of hardware acceleration, so there's
very little work to do for each frame.
Now what this means, it enables proper hardware
accelerated animations to happen via the use of a JavaScript
API, but without the slowdown from recalculating
lots of stuff each frame.
This is something we didn't have before, which is pretty cool,
huh?
I know what you're thinking.
Yeah, but we already have CSS animations
that are hardware-accelerated.
Right, well that's true.
And by unifying everything, we extend
the reach of hardware acceleration.
The Web Animations design brings together CSS animations,
transitions, SVG animation, and JavaScript-created animations
all into one thing.
In fact, the Web Animations engine
is currently used to run both CSS animations and transitions
in Chrome.
You probably didn't even notice when that happened,
and that's testament to how seamlessly the Web Animations
engine integrates into browsers.
Now even better, is that in addition to powering CSS
animations, you can call element.animate,
which creates an animation player object that's
used to interface to the animation
internals inside the browser.
Now the object return lets you query and modify
the running animation, so you get decoupled running
of animation in the browser, but retain the ability
to modify running animation from JavaScript,
kind of the best of both worlds.
Now remember this?
The cool 3D globe is actually built using web animations.
Bet you didn't guess that.
And it's just the tip of the iceberg.
Here's another demo, which shows how
you can manipulate a running animation using input
like touch.
Now you can't build something like this using CSS animation,
since there's no way to dynamically manipulate
a running animation once it's started.
But with Web Animations you can.
And here's another, which shows true synchronization, something
almost everyone I've talked to is excited about.
Web Animations are so cool, and you can use them right now.
Not only does Chrome have [INAUDIBLE]
support for web animations, but we
launched an open source implementation in JavaScript,
which let's you use the API in any one browser.
That Polyfill let's you use web animations right away,
and we're doing all of this work in public at the W3C
to make sure all browser vendors are on board.
So take a look at the Polyfill, the demos,
hack through the code.
Make your site shine with the most powerful animation
primitives available to web developers today.
I know you'll blow people's socks off.
I'm Alex Danilo, and I'm excited to see what kinds of things
you'll build using Web Animations.