Substantial Ryan McLaughlin

Animated Thumbs Up

  • Save
Animated Thumbs Up gif codepen code success upload science numbers thumbs up motion animation css svg

One of the experience tenants of the Helix Cup web app we just launched was simply: ‘fun’. One way we achieved this was by using subtle animations that were not only functional and assisted the interface, but also enjoyable and engaging.

This particular animation was used on a success state when teachers uploaded their students’ challenge competition scores.

See the SVG animation here.

The Helix Cup is a new annual competition designed by founders of the biotechnology industry: Genentech, to engage middle school students in South San Francisco, California to develop problem solving, teamwork, and hands-on science skills.

I'll be posting more that we did on this application soon.

keyboard shortcuts: L or F like