Past Meetup

60 FPS or bust: Bleeding edge web animation with Jeremy Kahn

Details

Animation brings an interactive experience to life. The appropriate use of motion in a web page or app conveys more information than static content. It also serves to make a more enjoyable user experience that keeps people coming back. It is important to achieve high fidelity in an animation — a consistent rate of 60 frames per second. Anything less leads to an inorganic and less compelling experience.

There are several methods by which to make things move in a web browser. The two languages that web developers have is CSS and JavaScript. JavaScript allows us to define arbitrarily complex behavior as well as respond appropriately to events. Modern browsers give us JavaScript APIs that are optimized for animation timing, but we still only get 16 milliseconds to render. CSS more efficiently handles the heavy lifting with regard to timing and rendering, and is capable of smoother frame rates. However, it is often not as flexible as JavaScript and therefore has different use cases.

In addition to APIs, high-quality animation requires effective workflows and tooling. With animation being such a visual craft, text-based workflows will only get us so far. In this session, we will explore some of the visual tools to help us build better animations more easily than ever before.

About the speaker: Jeremy is a New Products Developer at Jellyvision in Chicago. Previously, he worked at YouTube as a Web Developer. Jeremy spends a lot of time developing and shipping open source projects, many of which focus on making web animation easier and fun. He actively engages the web development community though blogging, speaking, and screencasting. His goal is to inspire at scale. You can find him online at https://twitter.com/jeremyckahn and his code at https://github.com/jeremyckahn.

See all Meetups from Chicago HTML5