How I built an online quiz to generate 1000+ custom animations.

The idea

Over Christmas break, I had the idea for a personal project that would both sharpen my skills professionally and also be fun and quick to create. Like most people, I secretly enjoy the dumb online quizzes like Buzzfeed “what kind of dog are you?” or “Which Harry Potter character are you?” and I thought it would be fun to create a quiz that was rigged – so no matter what you submitted, you always got a result you didn’t want. You’re always Voldemort.

initial idea

I decided to make a quiz that predicts how long you’ll keep your resolutions this year. This gave me a small scope and a limited timeline – New Years Day was 3 days away.

I had three goals with this project:

  • Increase my development skills
  • Dynamically produce animated videos based on user input
  • Finish a personal project, no matter how much I have to cut.

Just start

Sometimes the most important part of a project is overcoming inertia. If you aren’t sure where to begin, pick out a small piece that you can define and start there. I wasn’t really sure where to start when I began this project, but I did know I wanted a designed end response that said the user’s name and told them they were a failure. So, I started there.

I initially tried designing in Figma, which I normally use for UI design, but my results were not looking good. This isn’t Figma’s fault, it’s just how I begin every creative project. After floundering around for a while without any good results, I put design away for a while and came back to it later.

It was a bit of a rough start to the process and I started to get discouraged, so I moved over to setting up my code environment which helped get my mind onto something less subjective.  Sometimes the most effective way to get something done is to come back to it with fresh eyes.

Building the website

I built the website using the tools I currently know and like. When you immerse yourself into the world of web development, you will be immediately overwhelmed by strong opinions on frameworks, languages, and architectures. Don’t fall for it. The most important thing is to just pick something you can learn and stick with it. Remember, it’s not the camera that takes good photos, it’s the photographer. Development tools are just tools. You are the artist.

With that said, the stack I built this project with is:

  • Pencil and Paper for loose wireframes (and I mean loose)
  • Figma
  • ReactJS
  • TailwindCSS
  • Netlify for hosting and deployment
  • AWS Lambda for serverless functions

I got a super rough version running locally and started building out the barebones of the site. After I had a barebones website and question/answer functionality, I began to figure out how I would create the video response.

Check out the code on Github

Generating dynamic animations

I’m passionate about working efficiently in animation and automating parts of my workflow to maximize output for my input. This interest has impacted from how I work in After Effects, scripts and workflows I’ve developed and even an automated video-rendering system I’m building.

For this project, I wanted to try live customization on the web. I’ve used Bodymovin and AirBnb’s Lottie library for the usual displaying of animated web elements, but I wanted to push it and try to generate customized animations for realtime playback in the browser. This technique has much larger possibility, so I used this project as an experimenting ground.

I decided on HTML5 Canvas as the renderer for the video and added a player to my website. I animated a dummy video in After Effects and used Bodymovin to export a JSON file with the animation data. I used Lottie to load the animation data into my canvas element – it played!

Now, I needed to make the animation customizable. After a little bit of playing, I was able to  modify the JSON file that Bodymovin exports and update it before it renders to the webpage.

animationData.layers[6].t.d.k[0].s.t = nameString;
animationData.layers[15].t.d.k[0].s.t = nameCap;

animObj = lottie.loadAnimation({
	renderer: 'canvas',
	loop: false,
	autoplay: true,
	animationData: animationData,
	rendererSettings: {
		context: ctx,
		scaleMode: 'noScale',
		clearCanvas: true
	}
});

I had a very basic working version. Now I could focus on making the content better and the experience more enjoyable for the user.

Designing & animating the video

Up till this point, I had been working with dummy animation and designs that I was not happy with. I need an engaging animation but was working on a very limiting deadline so the animation had to be very simple. Like finish it in 2 hours simple.

All my initial ideas were too much work to get done fast so I spent some time away from the computer sketching concepts and bouncing ideas off my lovely wife.

When I finally had an idea I was happy with, opened up After Effects and started creating. Sometimes, I’ll design in Illustrator and bring that over to After Effects to animate, but when I’m working on a fast deadline or a personal project, it’s much faster for me to just design in AE (yay shape layers!) and then hop right into animation. Note: if you design in Illustrator and animate in After Effects, use Overlord. It’s a life saver.

Don’t get distracted by your pride.

At this stage of the process, it was tempting to spend more time trying to make the animation and illustration better. It is an ongoing struggle for me to build things to impress the other people in the motion industry. Instead of focusing on the goal of the video, I often stunt myself by trying to make work that will be appreciated on Twitter by other animators. It’s too easy to get caught up in the little details of animation that might make my mograph heroes respect me more.

For this project, I had to hold tight to the goal and not let my ego get in the way of completing the project. I wan’t making this to impress other animators. I was making this to learn the technology, build my skills, and successfully ship a project. No staff pick for this one!

Here’s the After Effects Project File!

How I calculated the results

Even though the user would get a bad result no matter what, I wanted to give the feeling that the results were being calculated with some sort of algorithm. I accomplished this two ways.

First, when generating the actual number of days, I simply created a function to select a random number between 1 and 15. This made sure the user got a bad result every time, but the answers would vary somewhat between attempts.

const randomNumber = (min, max) => {
	return Math.floor(Math.random() * (max - min + 1)) + min;
};
randomNumber(1, 15).toString();

Second, I added a loading screen that delayed the results and made it seem like the program had to calculate (it didn’t). I created a function to randomly sort and display an array of phrases like “Selling your data to the corporate overlords” and “Checking your answers with your mom”.

Polishing the UI and deploying

Now that all the important parts were done, I did some refactoring to the UI to make the experience better. I moved each question to its own page with a next/back button and added in the loading screen delay. I experimented with adding a social media share button but in the interest of time, stuck with a simple “Share on Twitter” button.

When it comes to deployment and server ops, I know absolutely squat. So, having heard good things about Netlify, I gave it a shot and loved it! I deployed easily and hooked up a custom domain (2020.itstheonlychris.com)

My site was live! Although this may seem simple to anyone who is a halfway experienced developer, this was actually an exciting milestone for me – taking a project from idea to deployment. And I didn’t even have to use WordPress.

Failure = learning

I didn’t have time to build any sort of database or tracking statistics for this project, but I still wanted a general idea of how many people created a video and what they answered. This is the part of the process where I feel the most stupid, because it could have been done so many better ways.

But, due to my limited knowledge and time, I went with my first idea of notifications: email. Bad idea. It was pretty simple to get a AWS Lambda function with SendGrid api to send me an email notification for every submit…but after one day, I plowed through the daily send limit of the free tier and Gmail locked me out of my email for suspicious activity on my account.

So, the next morning, I scrapped that system and wrote another function to send me a Slack notification for every submit. It went to a specific channel so I could just search it for unique messages and get approximate numbers of submissions. In hindsight, this or probably anything else would have been better than email notifications. However, I’m glad I took this route because I not only got to learn SendGrid API and play with Slackbots again, but I also was able to ship an MVP on time and then iterate quickly to a better solution. I didn’t let my dumbness keep me from finishing this project.

119 Email notifications + 974 Slack notifications = 1,093 Total Submissions!


Overall analysis

From a numbers standpoint, this project was neither a huge success or a huge flop. It had over 1000 submissions (meaning generated 1000+ unique videos) and had a decent reception on ProductHunt. But the real success for me was the massive satisfaction I got from taking a project from idea to build to deployment without getting distracted or carried away and without letting perfectionism prevent me from finishing.

I got to show my family and friends and watch my little sister try to keep guessing the “correct answers” to get the perfect answer. (I also cheated with the promo image and made it seem like you could “win” somehow even though you could not). Is that false advertising? Probably. Do I feel bad about it? Ehh a little.

I’ve been writing code for a long time and only recently have I gotten to the point where I feel comfortable building something without a tutorial or course to follow (or without copy-pasting most of the code). It’s liberating and I’m really excited for the doors it opens in my future. I’m also passionate about video automation and finding ways to combine animation and code and this was a perfect test of some new techniques I’ve wanted to try for a while.  

So overall analysis? Finishing a project feels great. 

Set clear boundaries for a personal project, then do it. 

Free After Effects Project

Github Link