I wanted the animations to be quick to load, since there's a good chance they'd only be visible for a second. This mean I was going to try and avoid using images if possible. Using some EPS files for logos our designers gave us, I was able to export the information into SVG. After following a few tutorials online, I was able to write a SASS mixin that incorporated the data into my CSS.
I also wanted to make soup cans, but thankfully these are pretty simple: just blue rectangles with white squares on them.
With all of my assets in place, I was free to have fun with some animations:
1. Appear and Slide
The first animation was simple. No cans doing anything. I just wanted the soup pot to appear to fill up and then slide off screen. For the full-up effect, I used a linear gradient:
background: linear-gradient(180deg, $soup-pot-empty-bg 50%, $soup-pot-full-bg 50%);
Putting them both at 50% ensures a hard line. From there I just animated that percent going form 0% to 100%;
2. Can Drop
When a user reports their totals for the year, it's the culmination of participating with Souper Bowl of Caring. It can also sometimes be a slow process if everyone is using the site at once. Because of both of these things, I wanted a special feeling when they clicked the "Report" button. For this I wanted the cans to tumble into the pot as it's growing and filling up. Same basic animation as the previous one, but I was able to add a few of the can elements I'd created. This hopefully conveyed the feeling of filling up a soup pot and shipping it out into the world to do some good.
3. Cans hop
I wanted a different loading vibe when a user was simply creating their account. I wanted the cans to be hopping inside of the pot - excited to be getting out.
4. Can toss
Once again, I needed an animation with a slightly different feel. When a user was getting ready to report, I wanted a feeling of preparing their collection, so tossing cans into a pot seemed to be the best way to convey.