slow in, slow out
the new year arrived, as anticipated; and under current circumstances i feel motivated to memorialize it this time around. 2020 was a ride, and bore the blame for a heap; but not everything was bad. the coming of a new year injects renewal and hope and brings some relief, if only rhetorically. i’m steering clear of urges to produce grand summations or predictions, just excited to see where this one goes and play an outro to one helluva year.
from top left to bottom right, the numeral iterations got more curvy. there was one iteration past this that i tweaked on the final tracing base.
still being in GIF zone, i thought it would be fun to capture the change of year with an animation. i imagined it would begin as “2020” revealing “2021” as the last digit swings away to reveal the new year. this felt achievable: low barrier to entry and relatively straightforward in terms of moving parts.
starting with a quick sketch of blocky numerals i realized that using the same thickness for both positive and negative space in the numbers would work well for the reveal from “0” yo “1”. i’m not familiar with typographic vocabulary and terminology likely exists for what i’m trying to describe (*not to self: research typography anatomy, fill in the gaps!).
i worked through some iterations to use as a template to trace over for the animation frames in adobe illustrator making an effort to keep evidence of each design iteration along the way. may have missed a few but i think most are accounted for and it’s helpful, for me, to see where things started and ended up. kept things s-i-m-p-l-e design wise for time’s sake. future me is thankful to have spent less of it in a design iteration rabbit hole and endless tracing for the actual animation frames.
while i hadn’t intend to focus so much on the numeral design, i’m glad to have meandered in that direction.
first tracing template i tried out with crop marks to register frame alignment. i 86’d this template when i realized there wasn’t enough room for the zero to completely swing down within the frame… d’oh.
the lower frame is the version i used for all of the tracing. it also shows the revised version of the number “2” that i tweaked to have a longer leading “hook”.
i had imagined using blank paper for this exercise, but all i had access to was ruled 3” x 5” index cards (thank you Sam!). i’m happy with the way things worked out with the ruled cards. i dig the subtle jostle of ruled lines over the animated frames.
when it came to how to animate the swinging “0”, i focused on the animation principle of “slow in, slow out” illustrated in the linked video by youtube creator Alan Becker. “slow in, slow out” is one of twelve principles of animation used to achieve lifelike, dynamic motion. these principles have been described by Disney animators Frank Thomas and Ollie Johnston in the book “The Illusion of Life” .
i’ve come across a few youtube tutorials on animation that describe these principles, and have learned a lot from them. Andy Bailey, a stop-motion animator and flip-book illustrator, has good resources; and The CrafsMan, an all time favorite creator, has several youtube videos on animation too.
after jotting some sketchy notes that look like messy spirograph attempts i moved onto tracing. this part was tedious and a bit monotonous, but fun and enjoyable. I mapped out where i thought the “0” should be to achieve the “slow in, slow out” effect, going back to add in-betweens where the “0” swings back and comes to rest. i scanned the frames, and added more where the animation was choppy.
sketchy spirograph notes on top. the long tick marks in the bottom frame are radiating at intervals exercising the “slow in, slow out” principle.
the starting, stopping, and “1” frames felt too static as just one frame, so i traced multiple to add a little more wiggle to the squiggle.
in the end there were 23 traced frames that i brought into photoshop, straightened out, squared up, and added a little drop shadow for depth. several were used a couple times either for effect or to achieve the returning swing without re-tracing any frames; a big perk to doing a GIF animation rather than a flip-book. some things i learned on this trip to keep in mind for next time:
numbering the back of the cards was a lifesaver for keeping things in order. could think about ways to differentiate frames used several times in one sequence
complete all edits to each animation layer before adding to timeline in photoshop! this is a biggie. each time i made a substantial edit (mostly adding effects to layers or new frames) it would throw the whole animation timeline out of whack. layer edits would show up during incorrect frames and not for the intended for reasons that make total sense but result in an absolute nuisance. i think that can be avoided and the workflow could benefit a lot from storyboarding and planning out edits
like storyboarding edits, map out where elements are moving in the frame so that space, scale, and placement are accounted for (so the zero can swing out of the flipping way)
i think there will be nuggets of information and “hot-tips” from the making of this animation that will be apparent over time. simple and straightforward, this process was encouraging and i’ll continue experimenting with animation and the different principles. to close, i’ll leave behind the hottest tip: keep doing animations, this was flipping fun.