Let's do a deep dive on how we hacked it together for the front end 🤓’s out there…
To make the animations themselves, I modeled a 3D version of the Copilot icon in Blender and animated them in After Effects, to build out a video library of potential responses:
But video files, gifs, or third-party js libraries are all too heavy and limiting for the product, so we took a page from old school game design and converted each animation into image sequences, autotraced them into SVGs in Illustrator, and laid them out into sprite sheets.
Making them into SVG sprite sheets meant we could style them for color mode support and animate them entirely with pure CSS. Lightweight, flexible, universally supported, and fast!
Playback is then controlled with javascript via 2 state machines. The first controls which animation to play and when. You can think of this as this state machine as the ‘Director’. The second controls how the animation is played. You can think of this piece as the ‘Actor’
The Director calls the shots. It evaluates conditions like if there’s an error, if copilot is 'thinking' and even if there will be strong positive or negative sentiment in Copilots reply. The Director is driven by 3 main components: AnimationType, OnFinish, and loopAnimation.
Once the Director knows which animation should be playing, it delegates the execution of this animation to the Actor. The Actor is a smaller and much more simple state machine that breaks each animation into 4 stages: 1) Idle, 2) Starting, 3) Running, 4) Ending
This Director/Actor setup allows for a separation of concerns, making it easy to extend and add new animations, while also allowing us to maintain full control of timings and transitions, creating an interactive Copilot experience - fun to watch and easy to maintain!
S/O to @deanblacc for wrangling the code on this. The GitHub Copilot design engineering team is killing it with this kind of attention to delightful details. I’m super excited to see more polish like this as the product matures. Thanks for following along!
