Add to cart microanimation

After a pretty intense week of learning about UX processes and Design Thinking methodologies, I decided to have some fun and try my hands at microanimations. I had created some pretty cute icons for Freshi's basket empty/full, so I wanted to have fun with it.

Here is a bit about my learning process and how I finally got the animation above:

Start and end states done, keyframes done, let's get into it! I already do Motion Graphics so it shouldn't be hard, right?

First attempt at Figma animation was very jaggy. My main issue was that the tutorials I watched were animating one element, while I wanted several elements to move simultaneously. I also tried to apply After Effects logic and animate every element individually, instead of frame to frame.

I made a very simple structure to explore solutions to this issue and try all the different animation options. Once I got all the frames and it's individual elements acting how I wanted, I felt on top of the world!

Once I had gotten the gist of the animation system, I tried it with the illustrated elements, iterating to add and try different effects:

Once I had my fun, I simplified the animation, scaling back to a useful, playful "Added to basket" microanimation.