MagicTask: themeable Rive and Lottie animations for a gamified task manager

MagicTask is a paid SaaS project management tool built for gamers, with list and kanban views. It turns everyday task management into a game: team members earn points for getting work done, which creates a bit of competition and pushes tasks to finish sooner and better.

Points buy themes, and a theme changes the look of the whole app. That meant every animation (the logo, backgrounds, task creation, task completion, crate openings) had to change with whichever theme a user had unlocked. With that many variables, building each animation once per theme would have been slow to make and hard to keep consistent.

The animations also had to stay small, run smoothly and respond the same way on the web and in the app, because they sit inside the screens people use all day.

Before animating, we wrote a guideline for how every MagicTask animation is built, so each one takes a new theme the same way. It keeps the work consistent across the set and lets new animations and new themes be added without starting over.

Interactive animations were built in Rive. Its state machine lets the app fire a trigger when the user does something, such as creating a task, completing one or opening a crate, and the animation responds straight away. We also added sound effects inside the Rive files, so the reward moments feel like part of a game.

Animations that play the same way every time were built in After Effects and exported as Lottie. Using Rive and Lottie instead of video kept file sizes low and gave us control over how far each file could be optimised. Static illustrations were designed in Adobe Illustrator.