The next generation of website animation?

Paul Boag

Have you noticed the cool website animation effects that Apple use? Well, now there is an app that puts that kind of coolness within the reach of us mere mortals.

Apple are known for innovating and their website is no exception. There is the retina loupe that uses a nice combination of CSS and jQuery, spinning clocks, animated graphs and various visual trickery. Apple have become the king of website animation

Apple have used animation on their product pages to great effect. These subtle, yet powerful animations communicate important messages in a visually engaging way.

Some of the most interesting examples are things like the animated smart cover for the iPad, the Airplay to TV sequence and the unlocking of the iPhone 5.

How does Apple create such great website animation?

At first glance you might be mistaken for thinking this was done in Flash, but would Apple use Flash on their website? I don’t think so.

Another option would be the video tag in HTML5 but the way these effects work just wouldn’t be possible that way.

It turns out that most of these animations were achieved with a clever combination of imagery, Javascript and Canvas.

Unfortunately there is some serious coding involved in getting this stuff to work, which is certainly beyond me and no doubt many of you reading this.

Fortunately there is now an app for that.

Skip the coding, get the app

Phosphor is now available on the mac app store and allows you to import any movie file and use that as the basis for your animation.

Phosphor app
Phosphor offers the potential to create amazing animations such as those found on Apple’s website, with little coding required.

The final website animation can be controlled with Javascript. This makes it better than an animated gif because it can be interactive (as you see with the smart cover example on the Apple site) and doesn’t have to instantly start as soon as it loads.

I have had a little play with the app and chatted with the developers.

I was concerned about how well it would work with a responsive design, but have been assured that because it canvas driven it can be easily rescaled. Also, unlike Flash it works on iOS devices and doesn’t have to play in a separate player like video. This is a big plus.

I am a little concerned about download speed as the outputted file was actually bigger than the video I tested it with. I am also cautious about using automatically generated code that I don’t fully understand, so will not be implementing this tomorrow on a production site.

Finally there is a big danger we are going to see some hideous examples of website animation that are nothing like the quality of those found on Apple. However, you cannot blame the tool for that. As always its how we use it that matters.

That said, it does look interesting and would enable you to add a richness to the sites you build. After all it is features like this that grab users attention and communicate an innovative, professional image.