Building a Better Web
June 19–20, 2017: Training
June 20–22, 2017: Tutorials & Conference
San Jose, CA

14 ways to bounce a ball: A tour of the web animations ecosystem

Bryan Braun (Sparkbox)
4:25pm–5:05pm Wednesday, June 21, 2017
Modern Web Essentials
 Location: 210 CG
Secondary topics:  CSS3, HTML5, JavaScript frameworks and libraries (Angular, React, Ember, Vue, etc.)
Average rating: ****.
(4.20, 5 ratings)
Download slides (ZIP)

Who is this presentation for?

  • Frontend developers, UI developers, and frontend designers

Prerequisite knowledge

  • Basic knowledge of JavaScript and CSS

What you'll learn

  • Gain exposure to the many options for modern web animation
  • Learn how to decide which animation approach and tool to use for a specific use case
  • Explore perspectives on improving web animation performance

Description

There are dozens of approaches for animating things on the web, each with their own strengths and weaknesses. Drawing on his experience maintaining Bouncy Ball, a project that compares web animation approaches, Bryan Braun leads a tour of the web animations ecosystem, exploring 14 of the demoed approaches that modern developers are using to animate things and the principles that transcend them all. You’ll leave able to choose the correct approach for your use case in order to maximize performance and minimize complexity.

Topics include:
Browser APIs

  • JavaScript
  • CSS animations
  • Web animations APIs
  • SMIL
  • HTML5 video
  • Animated GIFs

Animation libraries

  • Velocity
  • Greensock
  • mo.js
  • anime.js

Other

  • jQuery
  • D3
  • P5
  • Matter.js
Photo of Bryan Braun

Bryan Braun

Sparkbox

Bryan Braun is a web developer and designer at Sparkbox. Bryan’s work has been featured in the Washington Post, Daring Fireball, Smashing Magazine, and the Discovery Channel. He is always working on some sort of side-project and shares what he learns through his writing, speaking, and open source contributions. When he’s not writing code or tweaking fonts, you can find him reading, riding his bicycle, practicing the piano, or building Lego worlds with his kids.