Animation Strategy

The beginning of my animation strategy was to list out key features or important experiences which I thought would benefit through the use of motion. I mainly used Figma's smart animate, with the exception of the onboarding and Chatbot screen. For the onboarding screen, I used Adobe XD and for the Chatbot screen I used After Effects.

For onboarding, I ran into an issue with Figma, there was no 'linear' option for animation easing. I wanted the background gradient to move seamlessly but with only easing settings, it would appear to gradually stop and reverse. Using XD allowed me to loop the background into itself and from there I could repeat that loop by making it a GIF.

For the expanding card animation, I made the elements spread from a centerpoint, making it more natural by having elements from above the center move up, while elements below would shift downwards.

For the generating activities animation, there were subtle things I had to think about such as how I want the header to transition. I thought about how Spotify animates their song names from one to the next and wanted to experiment with this effect. I achieved the effect by using a mask to reveal header from left to right, explored some more, and went with the current animation. I chose to continue the motion of revealing/pushing from left to right (card pushes to the right, display icons, loading bar also go from left to right). When the header shifts down into 'List of Activities', the cards continue this downward motion as they slide down one by one.

For the chatbot, I was stubborn about using Figma or XD to make the audio waveform but both programs had their limitations. Figma wasn't able to smart animate vector points and XD didn't have the option for stroke gradients. In the end, I pivoted and recreated the screen in After Effects. There was a lot more control but it was also a lot more complicated to learn. I paired an audio file with the waveform, then lined up the waveform to follow the words on the screen.

The steps I took to create the animated gifs:
1. Recording the whole screen with a Chrome extension
2. Using an online web converter to convert the recording into AVI
3. Importing the AVI into After Effects to crop phone screen and render into MOV format
4. Importing the MOV into Photoshop to export into animated GIF

Takeaway / Reflection

My takeaway from the animation stage is that motion must feel natural. To make motion feel natural, I had to process what happens between the two different states - before and after. Where should an element be in the middle of a transition? How does it get to the after state? Does it shift right, or left? Do I use fades, or masks?

With these thoughts, I gathered different ideas - such as, if one grouped element moves in one direction, other elements should follow to create less friction. Certain elements should be animated with principles reflecting real life physics (Material Design) - cards sliding down from gravity, cards stretching like paper, etc.

For my tooling strategy, my animations could have been made cleaner if I used Principle or After Effects all the way. Keyframing provides more control, however smart animate is a simpler process to use.