Enhancing Key Gamification Moments with Rive!

Earlier this year, I shared a few examples of animations I created for Smartick, showcasing how Rive can enhance children’s experiences during their learning process with Smartick.

Now, I’m happy to share another Rive project for Smartick, this time designed to enhance a key part of their gamification—the streak.

For those unfamiliar, Smartick is an adaptive online learning platform for kids aged 4-14, focusing on math, reading comprehension, and critical thinking. One major challenge? 🤔 Motivating kids to finish daily sessions. For that reason, a key gamification element is celebrating when children hit a new streak record. Previously, we communicated this achievement by just displaying a static golden laurel on the streak counter. My task was to take that moment to the next level by designing an animation that enhanced the sense of achievement and celebration.

With support from awesome Smartick’s gamification team (credits below), I created an animation featuring Ticky & Clicky—two of the main guiding characters in Smartick- descending on a scaffold and welding the golden laurel onto the streak plate, turning the student win into a moment of celebration.

- Rive handles both vector and raster graphics nicely, which is crucial since Ticky & Clicky are raster-based. Rive enables complex raster animations through mesh deformations and bones. However, for this specific animation, 95% was achieved using only bones and precise layer separation.

- The Rive animation needed to blend with the gold laurel that remains on the screen after the animation ends. To ensure the laurel in Rive matched the non-Rive asset, we triggered an event when the welding sparks completely covered the laurel. This event instructed the external code to display the 'real' laurel asset instead, so when the sparks disappeared, the right laurel was already visible. This is an example of how the Rive event system allowed us to seamlessly blend production assets with the .riv

- While working on the welding animation, I found Rive's tagging feature to be very helpful for animating the lights on the characters' bodies. I organized all the welding lights into separate layers, labeled them as "Light," and then when the animation was nearly done, I was able to quickly and easily select all the "Light" layers at once using tag selection and just keyframe their opacity.