Motion at scale
At Intuit, I've had the opportunity for frequent collaboration with motion designers, and my current team is half motion designers too. Over the past few years I've had many opportunities to help them scale motion design beyond contributions to isolated projects.
QuickBooks Animation Library #
One of the early things I did with my motion design counterpart to scale motion was creating the open-source QuickBooks Animation Library and publishing a Medium article to accompany that work. While this was a great step in codifying animations and adding in a layer of semantic labeling, it didn't have the big impact internally that I'd hoped for.
Lemur Motion #
Lemur Motion revisited this space by focusing on the designer experience first and creating an easy path to add motion presets to designs exported from Figma. Here's a video demo of Lemur Motion in action.
You can check out the expanded library of animations as CSS here: https://lemurcss.web.app/
What's next? #
At this point I've stopped active development on Lemur Motion to focus on other projects. People are still using the tool, but we haven't been pushing adoption since we're thinking more holistically about a workflow that...
- accommodates novice and expert motion designers
- accommodates developers with no experience shipping motion
- provides a clear path to implementation on our various marketing and product platforms
- is opinionated about when specific animations are appropriate, but...
- can be customized or overridden for unique use cases
The video below (2:30) shows a more recent prototype I used to conduct user testing with 5 designers. The idea of adding animations directly into their Figma prototypes definitely resonated, but some people who were less experienced with motion were a bit overwhelmed by the timeline view and also wanted it to be more explicit when & why they would be using the plugin.
Currently, we are leaning towards not pursuing this concept since integrating tightly with Figma ties us to a specific tool with a constantly changing API, complicates development, and requires some complex repurposing of Figma's component variants to apply the animations. A more likely path forward is to allow custom animations in Lemur Motion, plus some other mechanism to incorporate them back into a Figma prototype.
Lottie dev support #
Lottie works great for shipping performant vector-based animations with transparency, but the documentation often leaves many developers scratching their heads. Over the past few years, I've prototyped many ways we can use the API to deliver different experiences. This interactive demo demonstrates some basic playback control with a section in the middle that loops until an event triggers the next section.
https://brettlyne.github.io/lottie-interaction-demo/
