<h1>Synching Animation Clocks with the Web Animation API</h1>
<p>This demo was made for <a href="http://www.smashingmagazine.com/?p=210830">my post on Smashing Magazine about where web animation is headed.</a> It uses a <a href="https://github.com/web-animations/web-animations-js">polyfill</a> to enable the Web Animation API. (Psst: Check out the JavaScript and CSS to see how it's done.) To learn more about the Web Animation API, <a href="http://rachelnabors.com/waapi/">check out my WAAPI resource page!</a></p>
<div id="CSSCats">
<h2>Cats animated with <br />CSS Animations</h2>
<p>Currently, it is impossible to synch two separate animations with CSS animations. Try adding new cats animated with CSS below. Notice that they do not run in synch with each other.</p>
<div class="cat withCSS"></div>
<button onclick="animateNewCatWithCSS()">Add a Cat</button>
</div>
<div id="WAAPICats">
<h2>Cats animated with the <br />Web Animation API</h2>
<p>But with the Web Animation API, you're able to set the <code>startTime</code> value across animations to properly synch them. When you add cats with the Web Animation API, they run lockstep!</p>
<div class="cat" id="withWAAPI"></div>
<button onclick="animateNewCatWithWAAPI()">Add a Cat</button>
</div>
/* All cats have the same dimensions and the same sprite for a background image. */
.cat {
background: url(http://stash.rachelnabors.com/24ways2012/cat_sprite.png) -800px 0 no-repeat;
height: 200px; width: 400px;
}
/* The cats animated with CSS have their running animations set with CSS */
.cat.withCSS {
animation: run-cycle;
animation-duration: .75s;
animation-timing-function: steps(13,end);
animation-iteration-count: infinite;
}
/* The keyframes for the run cycle.
This moves the background image sprite around. */
@keyframes run-cycle {
0% {background-position: -800px 0; }
100% {background-position: -800px -2591px; }
}
/* More information on this spriting technique in my 24 Ways article:
http://24ways.org/2012/flashless-animation/
*/
/* It's all presentational from here on.
Nothing to see here! */
#CSSCats, #WAAPICats {
display: inline-block;
text-align: center;
vertical-align: top;
width: 400px;
}
@media only screen and (min-width: 850px) {
#CSSCats, #WAAPICats {
margin: 3em 1em;
}
}
#CSSCats p, #WAAPICats p {
text-align: left;
}
body {
background: #e5e6e9;
color: #071933;
font-family: 'Lato', sans-serif;
font-size: 1em;
line-height: 1.5em;
margin: 1em 1em;
text-align: center;
width: 100%;
}
@media only screen and (min-width: 850px) {
body {
margin: 4em auto;
width: 80%;
}
}
h1 {
font-family: 'Aleo', sans-serif;
font-weight: 200;
font-size: 2em;
line-height: 1.25em;
}
h2 {
font-family: 'Aleo', sans-serif;
font-weight: 400;
font-size: 1.5em;
line-height: 1.25em;
}
p {
margin: .5em 0;
}
button {
background: #2d0d3c;
border: 0;
color: #f7e6ff;
cursor: pointer;
font-size: .9em;
padding: .7em 2em;
}
@media only screen and (min-width: 850px) {
button {
padding: 1em 3em;
font-size: 1em;
}
}
code { font-family: monospace;}
a:link { color: #1954c0; } a:visited {color: #702096; }
a:hover, a:active, a:focus {
color: #646d97;
}
// Here we set up a keyframes object containing values set in an '@keyframes' CSS rule
var keyframes = [
{backgroundPosition: "-800px 0"},
{backgroundPosition: "-800px -2591px"}
];
// and a timing object, which contains values we'd normally put in the 'animation' CSS rule
var timing = {
duration: 750,
iterations: Infinity,
easing: "steps(13, end)"
};
/* with the WAAPI's animate function, we apply both keyframes and timing objects to .cat#withWAAPI
(Have a look in your DOM inspector!)*/
var catRunning = document.getElementById ("withWAAPI").animate(keyframes, timing);
/* A function that makes new cats!
Goodie! This will be useful below. */
function addCat(){
var newCat = document.createElement("div");
newCat.classList.add("cat");
return newCat;
}
/* This is the function that adds a cat to the CSS column */
function animateNewCatWithCSS() {
// make a new cat
var newCat = addCat();
// Add the CSS class that kicks off the CSS animation
newCat.classList.add("withCSS");
CSSCats.appendChild(newCat);
}
/* This is the function that adds a cat to the WAAPI column */
function animateNewCatWithWAAPI() {
// make a new cat
var newCat = addCat();
// animate said cat with the WAAPI's "animate" function
var newAnimationPlayer = newCat.animate(keyframes, timing);
// set that player object's start time to be the same as the original .cat#withWAAPI
newAnimationPlayer.startTime = catRunning.startTime;
WAAPICats.appendChild(newCat);
}
Also see: Tab Triggers