Advanced Motion

Research to Inform

This motion graphic starts with a simple item, a comma, and uses it to jumpstart a fun and creative video. It morphs into a coffee cup and even the comma key on a keyboard, all to support the overall idea of drinking coffee in order to work.

I love how this video of kinetic typography invokes the chaotic feeling of the singing with the frantic motion of the words. They jump all over the screen and appear in different sizes to match the volume. It fits the style well and is very dynamic with the variety of unique movements.

This video of Burger King’s rebrand uses kinetic type along with real footage of people and places to get its message across. I particularly like how it shows the animation on real objects like the packaging, billboard, and even uniforms.

Create

I had considered making a lyric motion graphic, and I may still do, but as you can see at the top of the page, I decided to make some GIFs - specifically two GIFs that interact!

Originally I had the awesome idea of multiple GIFs on top of each other, tossing an object between them. However, while testing, I realized the webpage would not load them all at the same time, which would throw off the timing (they’re at the top so they load first!). I changed my idea to have the GIFs in a row instead.

I thought three would be a good amount. However, I wanted to make sure it appeared correctly on mobile as well, and on mobile, rows of items stack. I played around with different sizes but unfortunately, two was the most I could have play correctly.

I created a file with two compositions in After Effects, one for each side. I started by making a ball and “spring” platform on the left comp and making sure the way they pulled back and launched looked nice. Then I copied this over to the right comp and flipped them.

I had the idea of the ball pulling the background color away to change it. At first, I didn’t know how to move specific points of my rectangle shapes. I did some research and found out if I made a path, I could click the Path section and use Ctrl + click to adjust the points. After I did it once, I was able to copy and paste it for each one.

I considered having the springs get pulled and color change as well, but I realized I liked how the white and yellow went with the backgrounds, and it just seemed like too much happening at the same time anyway. So I got rid of that and focused on the background shifts.

A huge part of this project, unsurprisingly, was timing. I had to figure out which keyframes to line up for the bounce, the background change, etc. I also had to note the time when the ball left the screen so I knew when it appeared in the other one.

There was a lot of fiddling with parts and plenty of frustration and confusion at things not working, but in the end, the timing is good and the effect is great.