Eye-Catching Animations: Tips & Examples that Bring Banner Ads to Life

Eye-Catching Animations: Tips & Examples that Bring Banner Ads to Life

We love animated banner ads. They’re fun, they’re eye-catching, and they can deliver a lot of great info in a quick, engaging way. And your audiences love them too. In fact, eMarketer reports that the click-through rate on rich media banner adverts is 267% greater than their static counterparts. So when you use them the right way in the right places, it can do wonders for your overall marketing goals.

To tap into all the power of animated banner ads, we’re here to share some helpful tips to consider when starting a new campaign, as well as some of the cool things you can do with animations today. Check it out.

Things to Consider When Creating Banner Animations

  1. Having the right team.
    If you really want to create unique, out-of-the-box animations, you need the right team. That means having the right balance between tech gurus and creative geniuses. Because one without the other is like bread without butter — it’ll work, but it’s not nearly as good.

    “As a developer, my focus is speed and efficiency,” Emma Ulloa, Training Manager, explains. “Tech guys know what sizes, assets, and information we need to ensure that resizing or new placements are much quicker and easier. We can advise clients on the capabilities and advantages of the tech itself, which will offer the best performance, or if what they want to achieve is even possible. But the creative aspect is so important. Creative teams understand how the motions can work together in a way that’s not only more unique but more natural. They have the expertise and attention to detail that can make all the difference in the final product. And having that foresight from the very beginning makes the entire process a lot smoother for the developers — and the end result is a lot more exciting.”

  2. Having the right tools.
    Even the most qualified individuals are only as effective as the tools they’re given. That means embracing all of the languages, platforms, and frameworks in the market to be able to bring your visions to life without limitations. “You have to trust and invest in as many resources as possible for your team,” Fabian Miranda, Web Development Manager, advises. “Rather than just picking a platform or language and sticking only to what it specifically allows, you want your motion designers to be trained and experienced in all the tools; knowing their advantages and which will offer the best route for the client’s unique visions. Similarly, there are some frameworks that may make the job easier or faster, but they may not create the best animation in the end. As an expert, you have to know all these tools to understand which tech best suits the desired final product.”

    This expertise includes advanced animation tools like AnimateCC. As part of the Adobe Creative Cloud, this kind of tool gives you the ability to apply many of the features of high-end animations — such as advanced rigging, character animation, lip sync, and more. For additional details, check out the official site or contact Assemble with questions about utilizing these tools to create awesome animations.

  3. Being as detailed as possible.
    It’s not unusual for a company to not exactly know what they want. In fact, it’s pretty common. But in all cases, the more information you can provide your development and creative teams, the better. The stronger understanding they have of what you’re trying to achieve, the more insight and guidance they can provide to create an end product you love.

    “The specific details you share with your developers make all the difference,” Emma explains. “Instead of, we want the text to appear on screen, maybe it’s, we want the text to slide onto the screen from the left. For any simple motion, there are tons of options as to how to make that happen, so be detailed in your descriptions. Even if you aren’t sure how you want the text to appear on screen, for example, tell us things like the speed at which you want it to appear, is it all at once or in sections, is it smooth or more stylized? We can offer guidance on what’s possible, but without knowing what you’re thinking, the journey to get there will be a lot longer.”

    For example, Assemble recently worked on a banner animation for Nike. The campaign objective was to show off their new Brazilian National Team soccer jerseys, so they knew they wanted the jersey to rotate from front to back. But Assemble offered a suggestion to make the concept more dynamic.

    “A lot of times when we receive design-ready files from a client, the designer treats it as a static unit, not considering how they can animate it,” Mari Mora, Senior Visual Designer, explains. “Essentially, they provide a final frame without any idea as to how all the elements are going to come into place to achieve that. In some cases, it’s valuable for us to do a reverse approach — looking at the final result to determine each of the steps needed to get there. With Nike, we knew they wanted the jersey to rotate, but instead of just appearing to spin around, we thought about each of the little movements that would take the jersey from one view to the next. We ended up designing the frame with an extra asset to make a simple fade in and fade out have a glitch effect to it. The end result was very cool.”

  4. Remembering cohesion.
    Like any other successful marketing campaign, cohesive visuals and messaging are key to building brand recognition and loyalty. So when you’re planning a banner campaign, all of that needs to be communicated with your dev team upfront.

    Give them other brand materials, ads, and visuals you have that can serve as a reference point. And if you don’t already have one, consider creating a style or font guide that offers creative direction for all future animations. The most effective banner ads have a cohesive style that becomes recognizable to your audience. And, like mentioned above, if you’re not sure what you want that to look like, have a conversation with your dev and creative teams. They can offer suggestions that can help you understand all your options and find the right fit for your brand and your campaign objectives.

What You Can Do with Animations

Speaking of options, animations have come a long way since the days of the simple fade-in and fade-out, so here are just a few examples to help inspire your next campaign.

  • Stop-motion Animations. This technique involves piecing together multiple static images to create the illusion of movement. From having floating particles fuse into a single cell to bringing toys to life as they walk across the screen, we’ve done a lot of cool things here.
  • Playing with X, Y, & Z Axes. Think of the legendary text intro to the Star Wars movie… We can add another layer of dimension to the motion graphic by adjusting the Z-value. We can achieve a “2.5D” parallax that makes an element feel like it’s going off in the distance or coming toward you.
  • Changing 3D properties. Similar to adjusting the Z-value, tools like Javascript, Google Web Designer, and others allow you to scale 3D properties to make an object appear as if it’s rotating on its axis. An easy way to make a flat vector feel a lot more dynamic.
  • Scaling. We can scale elements from 0 to 100 at any speed. We can also create a bounce effect by scaling up beyond 100 (let’s say 120) and back down to 100. It adds a little extra eye-catching value to the motion. Simple, but super effective!
  • A combination of effects. Just like in our Nike example, blending different motion effects can create a cool, new style. Maybe it’s a scale with a change in opacity or a fade with a z-value adjustment — the combinations are pretty endless.

    To learn more about creating eye-catching animations that take your banner campaigns to the next level, contact the experts at Assemble today.

More Posts

AI Prompt Analysis

Introducing AI Prompt Analysis: How its Elevating the Creative Process in a Very Real Way

In today’s ever-changing production world, artificial intelligence is no longer a sci-fi fantasy but a remarkable reality. It’s becoming standard to rely on Artificial Intelligence (AI) to help us answer questions, write code, create content, design images, and more. But robots won’t be fully taking over our to-do list any time soon. Instead, we’re starting to see all the incredible ways that we can take advantage of its capabilities to improve our own internal processes. And that doesn’t mean teams taking a back seat; it means stepping up our skills.

AI-Generated Content & the Human Touch

It feels like just yesterday that robots were a thing of sci-fi films and cartoons. But just like that, they’re now helping us write articles, create images, and produce videos. Granted, we’re not quite ready to hire them full-time, but we are getting a really good preview into some of the things we can expect Artificial Intelligence (AI) to bring to the digital production world. So we’re taking a pulse check on what we currently know about AI-generated content and how to prepare your teams for what’s to come

blogpost Fran Reyes

In the Spotlight: Fran Reyes

My morning starts with tying up loose ends from the day before and then diving into any high-priority tasks for the current day. I like to check in with our designers and make sure their allocated assignments are perfectly clear and they have everything they need to get them done. The rest of my day is jumping in and out of meetings, both internally and client-facing, and ensuring that everything that was on the to-do list is checked off and delivered to wherever it needs to go — so we can do it all again tomorrow!

Client Modular Website Case Study

When a multinational hospitality company needed a quick turnaround on a new website for one of their new locations, they came to Assemble. To accommodate the tight production deadline, in addition to ever-changing rates and amenities, they needed a site that gave their team the ability to add updates, make edits, and create new pages — without any coding or development expertise.

Assemble 2023 Digital Outlook

Assemble 2023 Digital Outlook

Another year of exciting changes in the digital world has flown by. But if there’s one thing you can always count on in an ever-evolving industry like ours, it’s that Assemble will have you covered every year with all the latest and greatest updates for marketers in our annual Digital Outlook blog.

So as you prepare for a successful 2023, we invite you to check out 12 of the top trends you’ll see making a big impact this year — and you should start taking advantage now.

Get in ToucH