Schrodinger's Loot

Inspiration

Who doesn't love opening mystery boxes?

I've been working as a visual effects artist before coming into CS and I wanted to see if I can merge some of my animation skills with code. I've always wondered how some website have those beautiful animation on their page without having it as a video. Turns out one solution was developed by AirBnb (Lottie) and I wanted to try out.

What it does

You open boxes; you either get a cat or poison.

Collect all the cats! Collect all the poison!

Don't worry, there are no dead cats :)

How I built it

There is no back-end interaction so it was build entirely out of HTML, CSS, and Javascript. All the animations were animated in Adobe After Effects then exported with BodyMovin plugin which converts the animation data into .json files. AirBnb's Lottie library was used to load those .json animations into the web.

Challenges I ran into

The BodyMovin plugin and Lottie library restrict the power of After Effects. I was limited to using regular shapes and cannot use animation effects that would have made the process much easier. I also had to make sure that my compositions were simple enough so that it gets exported into .json file without any problems.

Accomplishments that I'm proud of

I'm a back-end developer and tend to avoid front-end like a plague. I'm proud of what the animations turned out with that short amount of time. Of course, I will be improving them in the future.