Web Animations

Mixpanel helps companies measure what matters, make decisions fast, and build better products through data. Their product is both incredibly powerful and intuitive - we know this because we use Mixpanel on this very site. 

Not only do they make a great product, but the team at Mixpanel are true BUDS. We're proud of the relationship we've built with them and the resulting work. So far, we've created a product video as well as web animations for their site.

  • Web Animation

  • Video Direction

Build better products

With the direction of their internal team, we created the product video above to highlight some of the key tools and features of Mixpanel. We animated their product in use to demonstrate some of the site's flow and functionality. For the grouping section, we were asked to provide a conceptual solution to visualize the sorting of users.

The first project that we worked on with Mixpanel was a series of web animations that are used as headers on their website. Each illustration is an abstraction of a product feature, and we made sure to pick their collective brain to make sure we understood the ins and outs of these tools. With their help, we came up with animations that spoke to each specific feature and created a motion language that was used throughout the set.

Animating with code

It was important that we were able to convert the feature animations into code so that Mixpanel's website didn't suffer long load times. We loved the isometric design of the illustrations and wanted to make sure that we could honor all three of their dimensions in the animations.

If our process was a witch's brew, the ingredients were After Effects, Javascript, Bodymovin, and Lottie. We've had so much fun with Lottie as it provides so much opportunity for animation on the web. The animations on this page are (mostly) Lottie and you can click to stop and play - go ahead, try it!