While drafting a Trivia Night for a few friends during Covid, I wanted to add an extra flair with animation but Google Slides’ animations were just not cutting it. Frustrated, I was inspired to design something to add the flair I was seeking.

Animation is all about the illusion of motion, in this case (Google Slides) that illusion is rigid and stale. Users are limited to select animation from a preset list and can only adjust these animations by speed. These limitations make the animations play from start to finish at a static speed that comes off stiff.

In order to give the illusion of motion, animators often use acceleration and deceleration to simulate an object in the real world, giving the animation life. This effect is called animation transitions or easing. Many application tools already have and use transition effects daily as a part of their work flows, and I know from experience that adding these effects to the animation in Google Slides will give them, and my trivia night, the flair they deserve.

I developed a comprehensive list of transition effects then emulated the effects as graphs (Distance over Time) to improve the implicit understanding of the feature. I then drafted a shorthand Google Slides design guideline, using it to implement my solution into the existing animation tool seamlessly.

As a bonus, while I was creating the graphs as a visual guide, I added a custom transition effect with an adjustable graph.

Transition effects adds a significant amount of depth to animations, this was no different in my testing of this project. I found that this dropdown provides a simple, clear, and easy way to add this effect to each animation. As for my bonus design, I believe creating the custom graph would be a challenge on development, but could be achievable if inspiration is taken from design systems like Figma and Adobe XD’s line tools.