The Madness Behind Motion

As exciting as it may be to jump headfirst into animated storytelling, it’s important to slow down and create a plan. The most beautiful, popular, and impactful animations from studios like Pixar and directors like Tim Burton completed preproduction to create masterpieces we all know and love, like The Nightmare Before Christmas.

Although animation and motion are different disciplines of art, they have a lot in common. Animation is typically referenced with filmmaking and uses character-driven stories. Motion is considered part of graphic design, with a focus on its impact on advertising, broadcasting, etc.

Animated Storytelling by Liz Blazer offers an insightful step-by-step breakdown of what needs to be done in the preproduction stage before moving on to animating. Liz delves into detail, explaining how to complete concept development, previsualization, and asset building. This first chapter of Animated Storytelling does a great job at defining all three of these concepts and further breaking down the questions you need to answer in each step.

For example, in concept development, you define what the piece of work you’re creating is about and what it will answer. Blazer outlines specific questions you can write out on a whiteboard or stick notes, some of which are: What must it be? Who is it for? How long must it be? What is the objective of the piece? When is it due?

The biggest takeaway from the introduction and first chapter of Animated Storytelling is “Slow is smooth. Smooth is fast,” and you can’t achieve this without preproduction.

GIFS Curation

1) This first GIF stood out to me because of the juxtaposition between the simplicity of the drawing and the endless loop motion. Twirling a pencil is a common frame of reference that everyone has used when they’re deep in thought. It takes me back to when I was writing essays in a classroom!

GIF created by doodles

2) Moving individual drawings to create a sequence using a flipbook is quite challenging. This dunking GIF is impressive and captures the satisfaction and triumph of taking flight to dunk a basketball.

GIF created by Devin Ross


3) This is a solid example of a stop motion animated GIF. Using a cut-out of a picture and taking lots of pictures where each one moves slightly to create a dance with keyframing makes you feel the celebratory emotion from this GIF.

GIF created by Nicky Mazur


4) The paradox of this GIF is captivating because the word “space” creates a cube that almost acts as a prison with no space. This is also a great example of tweening!

GIF created by naufalrel

5) The next GIF of garlic crying is memorable and relatable when you cut an onion and your eyes start to water. This GIF is also a great example of the onion-skinning technique that’s created by a frame-by-frame hand-drawn animation.

GIF created by GabiSoutoMaior

GIFs Created by Me

Flashing Lights

For this GIF, I focused on creating a “cut-out” style that has a disappearing and reappearing element. I found the image of the neon red digital clock displayed outside in the dusk with a person pointing at the time. It was challenging to create several separate layers to isolate each digit in the time display and then properly sequence them on the video timeline, where the different digits displayed were blocked at various times to create the flickering effect.

Don’t Blink or you’ll Miss it

This second GIF is inspired by my passion for Formula 1 Racing! I drew a simple car driving down a road during the day and used the onion-skinning technique to animate an aspect of the drawing over time. I chose the sun since it was a simple enough drawing to draw over and over again and adjust the spot slightly. I’m interested to see how keyframes and other features within this technique can adjust other aspects of a GIF over time to make it more engaging.

Rising Steam into Stars

The last GIF I created was the most challenging, a Cinemagraph. It took me a while to find an image with a singular cohesive movement that was repeatable, so I could isolate that one area with a layer mask to peek through and see the video behind the still image. Creating this GIF solidified for me how powerful layer masks are, how to add videos with still images, and what additional properties, including brightness or feathering, can do to enhance a GIF.

Works Cited

Blazer, Liz. Animated Storytelling: Simple Steps for Creating Animation & Motion Graphics. Peachpit Press, 2020.