Portfolio site, Part 4: The future of web animations?

In the lastpost, I dreamed up a cute animation for the “splash” page of my emerging portfolio site and went about building vectors and image assets. Here, I tryimplementing it and stumble into Web Animations, an API being developed by w3c.Polymer is trying to incorporate it. I’m going to try using it becauseI’m using the Polymer demo app (Topeka)as a blueprint for my site.

What I want is analbum to stick it’s nose out of the album cover for “Morgan’s Greatest Hits”. Then, when you click on the cover, it flies out to the right, lands on the turntable, and starts spinning. When that’s done, the needle sets itself and the whole thing flies into the corner to make room for the tiles that will cascade in (my hits/projects).

album-and-turntableI’ll be referencing my own build, in order to comparesome of my code with that of the original Topeka app. If you want to pull down the Topeka app yourself, clone this repository and run “bower install”.

Ok,so I’m going to build the animation above into the topeka-app.html (and later on I’ll call it morgans-app.html). First, I’m going to look for a way to start an animation when the page is finished loading. That is when I’ll have the LP show itself. Coincidentally there is a function called “startup”, and it gets called, I assume, by the “ready” property.

Lesson #1: I guess the ready property get “ready” property/function gets called when the polymer component is loaded. Good to know.

Polymer('topeka-app', { ready: function() { this.test = window.location.search.indexOf('test') >= 0; this.offline = this.test || window.location.search.indexOf('offline') >= 0; ... if (!this.user) { this.startup(); } },

Next, look at the startup function:

startup: function() { var elapsed = Date.now() - this.readyTime; var t = this.minSplashTime - elapsed; this.async('completeStartup', null, t > 0 ? t : 0); }

Lesson #2: Async is Polymer’s version of a timeout. Gotcha.

I’ve only ever animated with JQuery, a frequent sidekick to Angular in my past projects. But hey, Polymer seems to favor the “Polymer way of doing things”. So let’s google “Polymer Animations”.

Lesson #3: What do you know.About web animations

The web-animations module is on github:https://github.com/web-animations/web-animations-js

And don’t forget to dig into the demos:http://web-animations.github.io/web-animations-demos

You will discover this is an API built to these w3c specifications, which are works in progress.

Ok, so let’s skip ahead

Here’s what it looks like to use these new Web Animations to do what I set out to do.

completeStartup: function() { // show album this.$.album.animate([{ left: "0px", offset: 0 }, { left: "90px", offset: 1 }], { duration: 1000, easing: 'ease-in-out', iterations: 1, fill: 'both' }); },

This animates the album behind the cover. And a whole string of animations just like that one get the album on the turntable and spinning. Check it out in the “intro” function here.

Let it be known that it wasn’t easy. I ran into issues stringing animations together. The Polymer API isn’t quite caught up with the specifications. Give ’em time.

-Morgan Intrator (so the Man knows what I’m up to)