Animated Logos

EchoShield is a low-cost echolocation system for identifying drones in the field. The logo animation tells the story of how the system works: soundwaves are used to triangulate the location of a drone. With each new, overlapping soundwave, the image becomes progressively clearer.

View the live interactive version and click on the letters to see the animated effect.

I spread out three short animations over 1:30 minutes. The goal was to grab visitors' attention and get them to keep watching—by getting them curious about the animation.

The idea: if visitors stay on the page for a minute longer, or reload the page to see the first animation again, the time spent on the website increases, improving SEO. The animation is an SVG file. Despite its (original) length of 1:30 minutes, the total file size is only 200 KB.

elopage underwent a fast rebranding process. Normally, this would be a process lasting several months to preserve brand value among customers. But ablefy didn’t have that amount of time. So, to make it clear that elopage and ablefy are the same company, I created an animation demonstrating the transformation of the elopage logo into ablefy. Because I designed it as a vector animation, this was used everywhere: on social media, in pop-ups, and even as a logo in the navigation bar of the main website.

The rebranding of ablefy had one major problem: people had difficulty pronouncing the new name. In fact, some were confusing it for the name “abilify,” which is an anti-psychosis medication. So I created an animation that guided the viewer to proper pronunciation by presenting a word that most closely sounded like the correct pronunciation of the name: “enable.” “Enable” then morphs into “enablfied,” which then morphs into “ablefy,” hopefully, preserving in the mind of the viewer the sound of the word “able” in their mind from beginning to end.

The header animation consists of two Lottie files stacked on top of each other in HTML. This allowed me to assign unique CSS values to each element. The animated grid in the background is always set to 100% of the viewport width, while the text “Black Friday” has a limited maximum width, allowing for a truly responsive header animation.

See the live, responsive version here.

This is a secondary logo concept for the Washington Red Wolves (an alternative to the Washington Redskins NFL rebrand). Here, the letter (Washington) D.C. morph into two wolf eyes.

This was drawn in Adobe Fresco with the vector brush, imported into Adobe Illustrator, cleaned up and prepared for animation with the Astute Graphics suite of plugins, and animated in After Effects with the help of the Overlord plugin.

The original logo was an animated GIF at 414KB in size. This version of the logo below is a vector animation in 60fps at a size of 165KB.

Animated logo concepts for two German insurance companies.

Animated logo and brand concept for a mobile gaming company called Global Worldwide. OCP, the company from RoboCop, inspired the logo. The entire animation was done with Adobe Photoshop's Timeline panel (with a little VHS static effect added post-export).