As we get closer towards the end of the semester and the finale of my journey through motion and animation, we prepare to take things up a notch by creating motion not only for viewing purposes, but motion that can be interacted with. This week, I will continue with the next chapter of reading and summarizing the animation process, I will showcase a few examples of professional User Interface (UI) animation that really speak out to me, and I will explain my selections, as well as provide you all with an original project of an animated UI element of my own creation.

Reading

In the penultimate chapter of Liz Blazer’s Animated Storytelling book, she talks about animation and what to think about when on the computer and actually making your project come to life. For anyone who is new to animation, she warns that it is a painstakingly slow and difficult process (citing 12 hours in one day will get roughly 3 seconds of the animation done) and she suggests starting with the most fun and easy scenes. Animating these scenes first will give you the self confidence you need in order to get going on the harder scenes. Blazer also recommends splitting up the more difficult scenes as that will not only make things easier for you, but will also make you a better storyteller. This is some advice that I would not have known about had I not read this chapter because I’m usually the type of person who works chronologically, no matter the order of difficulty, so getting encouraged by a professional to start with the easier scenes might have been something I never knew I needed.

Blazer also highly suggests organizing your files, filenames, and your backup data accordingly to minimize any chance of losing all of your work. She then discusses key poses, which are more elaborate forms of storyboards where the animator will focus on each main pose in a choreography sequence and thus have the character more ready to be animated accordingly. Speaking of character animation, Blazer also highly recommends applying the anticipation and follow through principles to each of your character animations in order to make them feel more natural and to prevent your audience from thinking that not only your animation is flat, but your story is flat too.

Blazer reiterates three fundamentals of animation and filmmaking to ensure our shots are perfect before loading up the software. The first fundamental is to get subjects out of the center of the frame for a more dynamic shot. The second fundamental is to mix up shot length, and by that she means focal length. Do not just use wide shots or medium shots, add some close-ups during a dramatic moment so we can get up close and experience the character’s feelings. Using multiple shot lengths can help increase your story’s dynamic and make it appear more interesting as a whole. The third fundamental is to mix up shot timing, where each cut is a different length throughout the film so the audience can experience a variety throughout your film.

Blazer lastly touches on adding realistic camera effects and paying attention to sound in your piece. Because in real life, camera lenses have depth of fields and can sometimes show dark corners or dust, Blazer recommends adding a camera to your animation so you can enable a depth of field while also applying effects to your animation such as film grain and vignette so the animations looks more realistic and feels like it was shot with a real camera. In terms of sound, Blazer suggests messing with your soundtrack all the way to the end of your project until you get the sound that fits your final story theme best. She also suggests timing your soundtrack with your character’s movements and choreography in order to make the sound come to life, and lastly, recommends turning off all volume while editing in order to make sure your character movements are still fluid and that you are not solely relying on sound to move your story.

Research

Before I show you all my own creation of a Unser interface animation, I scoured the internet to try to find some of the best and most inspiring examples that intrigue me very much.

Super Mario 64 title screen

This is definitely a weird example of user interface animation, and it does not have any effect towards the game whatsoever, but I wanted to include this because of how fun it is. Plenty of first-time players will launch this game and spend a few minutes on the title screen, playing around with Mario’s face as if there was not a full game waiting behind the start button. I figured it was a fun feature to show because it demonstrates that if developers put a lot of care into their animations and details, then their players can have fun with just about every aspect of the game, including the title screen.

Apple iPad Air webpage screenshot

You can literally go on any page on apple.com and find clear-cut examples of brilliant UI animation as you scroll down. I went to the webpage for their new iPad Air and scrolled down to see what animation I can find. I found this animation that demonstrates the return of Touch ID, but this time, it is built into the top button. Because you cannot easily see the top button from the large view, they animated a smaller magnified circle to show the top button. As you scroll down, you’ll see the circle disappear and lines form across the diagonal of the screen, saying that the display is 10.9 inches long. I could go on and on about what other animations Apple has on their websites, but that just goes to show how carefully they consider their site and the details they want to reveal to their audience on a level of clarity like no other.

Speedtest website.

Sometimes it is very important to know what your internet upload and download speed is, and the best place to try it is on speedtest.net. Not only is it very easy to gets results for your internet speeds, but they have such a clean UI as well. When you first get onto the site, you see a blue, green and purple outlined circle that says “Go.” When you hover over it, the inside of the circle becomes slightly brighter, indicating that you are currently selected on this option. When you select it, the circly morphs into what looks like an RPM dial and there’s a pointer that turns all the way to your speed. Above the circle, there’s a line that travels from one end of the screen to the other end, showing a progress bar. There’s no way to interact with it, but it does a good job of visualizing what your internet speed looks like and how it compares to each other.

Rolls Royce menu

This next example may be the closest I ever get to a Rolls Royce! In all seriousness though, the menu page for this website is really clean, even if it is a bit laggy. The cursor is actually the circle that is surrounding the X. To get to the menu, you select the usual three horizontal lines (which have their own animation) and it reveals the entire left border. The menu sign transforms into a close sign, and then there are options to look at their ownership, about page, and car models. When you select an option, the word you selected will move to the right a bit and more options will reveal themselves below the menu option you selected. It all moves in a nice horizontal fade and can be very satisfying to navigate, just like I imagine their cars are as well.

Wii Shop download screens

This is another brilliant example of UI animation made by Nintendo themselves. Again, this is not one that you necessarily interact with yourself, but it’s a unique way to show the progress you’re making on your download. There are three blocks on the center of the screen and Mario will run ever-horizontally across the screen until the download is done. The way they let you know how the download goes is by having Mario hit a block after a certain percentage of the download is completed. When Mario hits a block, it goes from a brick overlay to a solid brown color, and when the download is complete, Mario will hit the last block repeatedly until the download is fully finished.

Again, this isn’t an interactive form of UI animation, but it is a unique way to animate a progress bar that makes the UI for a seemingly bland screen look inviting and impressive.

Creation

Below is a short video clip of an animated UI element that I created. I will explain my process below the video, and once you give it a watch comment down below and let me know what you think of it!

My custom UI animation

Alas, we have my project which you can see above. I looked at a list of UI animations and got inspired by the calendar animation, which turned from a shortened calendar widget to a full month calendar. I decided to do the same thing but with a calculator icon turning into a fully functional calculator. I quickly made the calculator icon (which at first was bordered by a shape made by the pen tool until I realized I could just use the rounded rectangle shape tool for the same and much more accurate effect), but then realized that having it sit on the top corner was not enough. I looked on the top of my MacBook Pro and noticed all the little icons sitting on the top menu bar of my computer. This gave me the idea to draw out the other icons that appear in the video. I drew a clock, a calendar, a WiFi and a Bluetooth icon that all just swipe off the left of the screen once the calculator icon opens up.

The most challenging part was the full scale calculator itself. I needed to figure out how many boxes I was going to use and how each line from the calculator icon was going to animate to create the box. This is where the tutorials really helped me because I never knew about the Trim Paths feature in After Effects but that makes life so much easier because now whenever I want that type of effect I don’t have to look to create a mask and then add a stroke layer (This could have been particularly helpful on my GIF assignment but I digress). Once I furred all that out, I created new lines with the pen tool that start roughly where the calculator icon is placed and end up in their respective locations to form the full calculator itself. I added a little red circle as the close icon and two rounded rectangles as the background colors for the calculator.

Next up were the numbers. They were incredibly easy to add and place, but I wanted to add a little spice to the calculator animation. So I solved a very simple math problem and decided to animate the elements that would eventually be clicked on. I knew I wanted the clicked elements to scroll up like a lottery wheel and then have the scrolled element appear on the entry bar above to make the scrolling seem universal, and as if clicking the button would actually have an effect. I, of course, used track mattes as my solution again. I added three solid layers and masked them all to fit the boxes of the 2, + and = signs. I trackmatted the numbers to the masks and after entering and adding another 2, + and = sign below their respective selves, I was able to get the scrolling effect that I desired, albeit it goes a bit quicker than I would have liked.

I also wanted to create an effect for hovering with the cursor (which was also made with the pen tool and features a drop shadow effect). I moved every frame and whatever key the cursor was over at the given frame, I would change the number or element’s fill to yellow, and change it back to black once the cursor left that key.

Once the animation was complete, I took the key frames and reversed all of the necessary ones I needed so my last frame can be the exact same as my first one in the video. This was actually relatively early throughout the process but I decided to mention it here because chronologically, it is the last part of the video.

If I’m going to be completely honest, this was not my favorite project I’ve done throughout the semester. I enjoyed making the stop motion and the logo stinger more, but I understand the importance of being able to create a solid UI animation in order to keep users engaged, and I believe my animation turned out quite well.

Update: Right after I hit “publish” and right before I submitted the post, I realized that I did not include any audio in this scene! Luckily, I was able to go back and take two downloaded sound effects that I had (a click and a sci-fi whoosh effect) and add them straight into my project. I watched my piece over again and I did not see anywhere else that audio would have been suffice, so I left it at that. Thank you all for your patience and I hope you enjoy the project nonetheless!

Further Reading

For any of you reading this, if you are interested in motion design and want to learn how to create some animations like mine above (or any of the examples you see above), then I would highly recommend reading this full guide on motion design by Toptal. Here, author Micah Bowers explores the origins of motion design, explores the many ways motion design is distinctive from UX, and describes the 12 motion design principles while providing easy-to-follow examples. Check it out if you would like to learn more about this type of motion design. You will most certainly learn something new and come away with a better idea of how to improve your animations.

About the Author Gabe Walerysiak

My name is Gabriel Walerysiak, and I am a graduate student at Quinnipiac University in Hamden, Connecticut. I graduated with my Bachelor's Degree in Film, Television and Media Arts, with a minor in Mathematics in June 2020. I am currently pursuing a Master of Sciene in Interactive Media and Communications and will graduate with my master's degree in May 2021. I recently interned at GlucoseZone this past summer, where I edited and helped film a bunch of promotional content for their social media pages. I have a hobby of capturing and editing video-game footage for a YouTube channel that I started in the Seventh grade, and that channel is the primary reason I chose to major in Film, TV, and Media Arts. I am also a passionate runner, and even though I am no longer on a team, I run to keep in shape because I know how important that is in today's world. I am looking forward to be more fluent with technologically enhanced creative programs such as the Adobe suite, productivity tools such as Microsoft Office, and any other creative tools I can get my hands on to further improve my work as a creator.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: