Web animation: which is the best tool for the job?

Animation has come a long way on the modern web, and users now have multiple choices of ways to make something move on screen. With so many options – such as CSS, JavaScript, SVG, the Web Animation API – how can you be sure which is the best choice for your project?

Val Head is a web animation expert, author, and design evangelist at Adobe. She also teaches CSS animation on Lynda.com and curates the weekly UI Animation Newsletter. Head will be speaking at Generate New York – the web design event brought to you by the makers of net magazine, Creative Bloq and Web Designer magazine – on 25-27 April 2018, where she will be revealing which web animation options are the best fit for common UI design tasks. (Want more web design info? Try our guide to the best web hosting services.)

In her talk, titled Choose your animation adventure, she’ll look at the full spectrum of animation options from CSS to React Motion and show which are best suited for things like state transitions, showing data, animating illustrations, and making animations responsive.

Once the options have been explored the next step is to look at the tools and how they impact performance. Head has the answers.

Head will also lead a workshop at Generate New York, titled Essential web animation techniques. The blurb for this workshop says: "This workshop will get you started with the essentials of web animation. It covers the basics of motion design theory as it applies to the web, and how to use animation to improve the user experience. 

"In addition to the theory, we’ll use hands-on exercises to explore the similarities and difference of animating with CSS, JavaScript, and SVG. You’ll leave knowing how to bring your work to life with motion in meaningful ways and which web animation tool to use to get it done."

Visit the Generate New York conference site to see the full, star-studded line-up, and book your early bird tickets now.

Related articles:

• How to debug web animations
• 5 steps for mastering web animation
• 15 Web APIs you've never heard of