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
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.
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
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.
- The most important source of UX education you’ve never heard of
- How to squeeze the most from your images
- Designing with data and incremental development