Animation
Multi-Client Loading Animations
Company
Mazama
Team
Casey (myself) - Design
Drayson - Creative Direction
Makenzie - Project Manager
Deliverables
3 Branded Loading Animations in GIF and MP4 Format
Brands
Optimum, Frontier Communications, FreeConnect
I was tasked with creating visually stimulating animations for client web forms and chatbots to enhance user engagement. The main goal of these animations was to craft a more enjoyable experience while reinforcing brand identity.
Project Overview
Timeline
3 weeks
Optimum and Frontier
The direction I received for both of these was to replicate and enhance existing branded animations (that I’m unable to show) that both clients had already created, while converting each into a mesmerizing loop. We didn’t have any of the working files from either client, so I had to do my best to match the fluidity and styles. This was especially challenging with Optimum since the reference didn’t have any exit animation. I’d have to come up with that myself while maintaining the look and feel of the reveal animation.
Conceptualization and Analysis
I began by dissecting both of the original animations to get a feel for the timing and movement, paying special attention to Optimum’s overlapping action and Frontier’s easing since those were clearly the most unique aspects of each.
Design and File Prep
I then brought both client logos into Illustrator to prepare my files for animation. I was especially careful to keep all of my layers well-organized and named before exporting since I’ve had too many experiences with poorly optimized workflows in After Effects. Once I imported my files and set everything up in AE, I began meticulously recreating the animations.
Animation and Iteration
Matching the original curves involved spending a TON of time working on the speed graphs for Optimum as well as sliding frames around, trying to make sure all of the letters felt connected while still keeping the cascade effect. I also added a few small enhancements to build upon the original, adding a bit more anticipation with a longer hold before the logo animates out (as recommended by my Creative Director), and some tweaks .
The process for Frontier was much more straightforward since there were only a handful of animated elements. The main priority there was to maintain overlapping motion and try to convey a nice sense of stretching on the lines.
Final Deliverables
I’m quite proud of how the Optimum animation turned out. The smoothness of each individual element and the cohesive flow of the entire piece stand out to me. If I were to make any revisions, I would add some squash and stretch to the ball during its exit animation and refine the one frame near the end where both the ball and its motion trail are visible.
Frontier’s loop is far more straightforward, but it feels elegantly simple. If I were to make any changes, I would tighten up the timing at the end of the animation for a quicker restart.
The original idea for FreeConnect was to incorporate intricate 3D elements and sophisticated animation styles, resulting in a truly mesmerizing and masterful work. The Creative Director and I were incredibly excited about it after getting a storyboard together, but sadly this larger version of the animation was cancelled due to time restraints, and we only ended up keeping the first frame from the storyboard I created.
Storyboard
We took the first frame and converted the three dots into the different stickers you can see in the other frames here, sadly scrapping the additional animation that came with them. Then, I just had to play with the curves to get the easing right on each bounce.
Final Deliverable