Speaker spotlight: Lisi Linhart on practical web animations

How can animation and interactions on the web improve the user experience?

In general our brains like to have concepts explained in a simple, logical way. On the web we essentially have documents that give us information to read, but with web animation, we can explain and show difficult concepts in a much simpler way by using motion. At the same time web animation allows us to add interaction and to make elements move according to user input, which highly increases engagement in a site and makes it more likely that a user will stay on the site.

What are your favourite tools for creating web animations?

I’m a big fan of using pure CSS with a combination of either SASS or CSS Variables. CSS Variables have become immensely useful in the animation world to make calculations in JavaScript, but apply the animation changes within CSS. If I have to animate SVG, the go-to-tool is still GreenSock's GSAP, just because it normalises weird browser behaviours when transforming SVG elements and because it takes care of performance optimisations, so you can fully concentrate on animating. But in a lot of cases you might not need a big library like GSAP, so a library like Just-Animate, which is based on the Web Animations API and quite small, might be the better option.

What’s a common mistake people make when creating web animations and how do you avoid it?

Animating the wrong CSS properties is a big one. Some properties like width, height, and left trigger layout recalculations, which can lead to big performance bottlenecks and should be avoided. This can also be seen with CSS Variables set on a parent element with a lot of child elements, which would cause lots of style recalculations and thus you should set the CSS Variable as local as possible.

You also turn hand-drawn sketches into beautiful interactive and animated SVG illustrations. How do you do that?

In general I draw by hand on paper, just because I like being outside and using a real pencil and paper. Once I finished a drawing, I'd scan or photograph it and then trace it into vectors using Adobe Illustrator. In Illustrator I’d split my illustration in separate layers, so I can animate them separately later on. Then I’d export them and run it through an optimisation tool like SVGOMG. The actual animation is done in the browser using either CSS or JavaScript depending on what I’m trying to do.

Can you show us one of your animations and explain how you created it and/or how it improves the user experience?

This is a simple pen, that incorporates touch interaction and animation. Here the animation improves UX, because it reacts to the touch input and depending on that shows animation. At the same time the little bouncy animation makes sliding the tabs more engaging. This little app is built in Vue, just because it makes handling events so much easier, but you could also implement it in pure JavaScript and CSS.

What can people expect to take away from your talk in Bristol?

My talk centres around the usability and performance aspect of web animation with a lot of hands-on examples in JavaScript and the Web Animations API.

Apart from Lisi's talk, Pixel Pioneers Bristol covers CSS layouts, DevTools, the JAMstack, conversational design, and more. There are also a couple of spaces left on the web accessibility workshop. Get your tickets today!