The next generation of website animation

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Paul Boag Posted by: Paul Boag On Friday, 19th April, 2013

The next generation of website animation?

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.

Reviews:
The estimated time to read this article is 3 minutes

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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.