Animating SVG

Catriona MacKenzie

Half-day workshop - in English

Animation can work wonders for the look and feel of a website. Used carefully it can enhance the user experience by providing context, focus and feedback to users, as well as making mundane interactions a little more fun. When combined with the flexibility of SVG, developers can easily create animated graphics that help their users and add personality to their websites using just a few lines of code.

This workshop is aimed at absolute beginners who would like to learn how to animate images on the web. A basic knowledge of CSS and JavaScript is helpful but not required as everything you'll need to know will be explained during the workshop. The main thing is to have a go, and have fun!

During the workshop we will cover:

  • The basics of SVG
  • Animating SVG using CSS
  • Animating SVG using GreenSock’s JavaScript animation library
  • Tips for optimizing performance
  • Tips for browser compatibility

By the end of the workshop you will have created your very own animation you can use to impress and entertain your friends and colleagues.

Link to slides:

Primarily for: Developers, UX specialists, Designers

Participant requirements: A laptop with internet connection, ideally with an SVG editor installed (e.g. Inkscape, Illustrator or Sketch), although installation files for Inkscape will be provided if you don't have one installed already.