Last week, one of my favorites conferences, Velocity Conference, took place in Santa Clara. Beside the joy of meeting old friends and making new acquaintances, Velocity was exciting for me due to its crazy amount of excellent materials to digested post-conference. In addition to that, this was also for the fourth time I gave a talk there and this time I presented the topic of Smooth Animation on Mobile Web.
Update: the 30-minute video is available, watch it on YouTube!
The objective of the talk (see the slide deck) is to demonstrate some examples which implement some common best-practices for client-side high-performance web apps: optimized JavaScript, requestAnimationFrame, event throttling, and GPU acceleration. Rather than simple examples, demos which represent real-world applications were shown instead. This covers things like kinetic scrolling for implementing a flick list, parallax effect in a photo viewer, and last but not least, a clone of Cover Flow with a deadly combination of CSS 3-D and JavaScript.
Followers of this blog corner may realize that this is now a new topic as I have covered this extensively in the past (on kinetic scrolling, parallax effect, and Cover Flow). This is the first time however that I delivered the subject in a tech talk (and I won’t fool myself, there is certainly room for improvement). It is certainly a challenge, complicated written articles can be consumed and analyzed one step at a time while a presentation forces everyone to be on the same pace. I still plan to experiment with various different deliveries of the content.
On a related note, it is also fascinating to notice how sophisticated user interface takes a lot of ideas of everyday physics, whether it’s about geometry or kinematics. Even on many modern mobile platform, the hardware is more than capable to produce all fancy effects that we want. The limit will be our own creativity: would we learn more about physics and leverage it to build amazing interface for mobile web?