Cassie Evans is a creative developer with a rich background in graphic and motion design. She is also a core team member of Greensock, the makers behind the GSAP animation library. GSAP allows developers and designers to animate anything (that’s right, ‘anything’) from HTML elements, Canvas, SVG, and Three.js to portfolio sites, interactive games, learning experiences and much more. In her talk at WebExpo 2024, Cassie shared invaluable insights and techniques to tackle seemingly impossible UI animation challenges. Let’s dive into the highlights of her presentation.
Traditional animation vs animating with code
Cassie started by drawing parallels between traditional animation techniques and modern web animations. While in traditional animation the animators need to draw all of the individual frames that will create the illusion of movement when played in a sequence, when animating with code we only need to define the start and the end point, the computer will do all the job in between for us. Hence the common software animation term ‘tween’.
Visual tricks to improve user experience
When researching her talk and the attention gaps, Cassie found a surprising link between UX research and the psychology of magic – visual awareness. Both fields confirm that we are less observant than we think, due to inattentional blindness caused by the gaps in our visual system processing changes. While magicians exploit inattentional blindness to perform sneaky tricks we should try to avoid it when it comes to user interfaces, as it leads to frustration and confusion.
Transforming frustration into delight
By using intentional animations appropriately, designers can guide attention, maintain focus and improve the overall user experience. In her talk, Cassie mentioned two useful tips to keep in mind when it comes to building UI animations:
- Use motion to signal change (e.g. showing an item moving to the basket)
- Mind change blindness – Thoughtful use of page transitions and animations not only improves aesthetics but also aids user orientation and understanding.
The most magical animation technique
One of the major challenges in web animations is that not all properties are animatable. To be able to animate the impossible without killing your web performance, Cassie reveals one magical animation technique – FLIP, that is designed to avoid layout reflows.
First: Capture the initial position and size of the element.
Last: Move the element to its final position and size.
Invert: Calculate the difference between the first and last positions and apply a transform to reverse this movement.
Play: Animate the transform back to zero, creating a smooth transition.
Dive deeper and explore more about techniques on how to make the impossible possible and how to create smooth transitions by hitting that play button below. Watch the demo-full recording of Cassie’s 40 minute talk to see all the practical examples in action! And as Cassie said at the end of her talk “Use your magical powers responsibly.”