BLOG - COMPANY

How We Designed and Coded an Animated Banner Ad with No Images

STEVEN FABRE - SEP 12, 2014

We were recently given a banner ad spot over on Codepen, a code prototype and community platform for developers. Between people’s banner blindness and the low click-through rates associated with banner advertising, we knew we had to do something a bit different to stand out.

Working with our Marketing team, we decided that promoting the responsive capabilities of our new email builder, Canvas, would be the most relevant topic for the Codepen community. Instead of designing a static banner ad, we decided to code the entire banner, animation and all, without using images.

The Banner

While you can view the fully coded version over on Codepen, below is an animated GIF to show the banner in action.

The Process

Before thinking about animation or sinking our teeth into the complexity of the task ahead, we started by tackling the messaging and design. Canvas is an intuitive drag and drop tool to design emails that work everywhere, so we wanted to reflect those qualities in the ad itself. The “works everywhere” aspect was the main point we wanted to get across, so showing an email being built and displayed in various devices was the concept we landed on.

Once that was sorted, we started designing the main animation frames using our own illustrative style. At this point, even though the designs weren’t polished, we jumped into code.

Re-creating key frames in HTML and CSS

When you look at it closely, the devices we designed are very similar. Each device has a border, a screen and an email containing both a header and content. In fact, all icons share the same HTML markup:

<div class="device">
    <div class="screen">
      <div class="email">
        <div class="header">
        </div>
        <div class="content">
        </div>
      </div>
    </div>
</div>

Some of those icons share the same CSS rules:

.device {
	position: absolute;
	bottom: 50%;
	left: 50%;
	background: #202123;
	box-sizing: border-box;
}

.device .screen {
	background: #D9DEE2;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

Each device icon has its own property:

.device.desktop {
	min-width: 222px;
	min-height: 147px;
	border-radius: 5px;
	margin-bottom: -73px;
	margin-left: -111px;
	padding: 11px 12px 16px 11px;
}
.device.tablet {
	min-width: 88px;
	min-height: 130px;
	border-radius: 6px;
	margin-bottom: -65px;
	margin-left: -44px;
	padding: 11px 4px 13px 4px;
}

// Camera above the tablet's screen
.device.tablet:before {
	content: '';
	position: absolute;
	min-width: 2px;
	min-height: 2px;
	background: #72777D;
	left: 50%;
	top: 5px;
	margin-left: -1px;
}

// Tablet's home button
.device.tablet:after {
	content: '';
	position: absolute;
	min-width: 8px;
	min-height: 8px;
	background: #72777D;
	border-radius: 50%;
	left: 50%;
	bottom: 2px;
	margin-left: -4px;
}

.device.phone {
	min-width: 54px;
	min-height: 110px;
	border-radius: 3px;
	margin-bottom: -55px;
	margin-left: -27px;
	padding: 11px 3px 14px 3px;
}

// Speaker above the phone's screen
.device.phone:before {
	content: '';
	position: absolute;
	min-width: 10px;
	min-height: 2px;
	background: #72777D;
	left: 50%;
	top: 5px;
	margin-left: -5px;
}

// Phone's home button
.device.phone:after {
	content: '';
	position: absolute;
	min-width: 8px;
	min-height: 8px;
	background: #72777D;
	border-radius: 50%;
	left: 50%;
	bottom: 3px;
	margin-left: -4px;
}

Animating the frames

Instead of having static frames that abruptly jump from one to another, we really wanted to create a memorable experience by animating those frames. Since all devices share the same HTML markup but have different CSS properties, we could animate the way each device styling was applied by using the CSS transition property.

.device, .device:before, .device:after, .device .screen {
	transition: 0.1s all ease-in;
}

However, just using the transition property didn’t feel quite right. We wanted to make it look more natural by having the devices morphing into each other so we created our own morphing animation using the transform rule within the keyframes of the CSS animation property:

 {
	0% {
		transform: scale3d(.8, .8, .8);
	}
	20% {
		transform: scale3d(1.05, 1.05, 1.05);
	}
	40% {
		transform: scale3d(.95, .95, .95);
	}
	60% {
		transform: scale3d(1.01, 1.01, 1.01);
	}
	80% {
		transform: scale3d(.99, .99, .99);
	}
	100% {
		transform: scale3d(1, 1, 1);
	}
}

.device {
	// Animate using the morphingAnimation keyframes over 300ms after a delay of 100ms
	animation: morphingAnimation 300ms linear 100ms;
}


Timing the frames

The last step of the process was to find the right timing between the original key frames. We made the timing decision based on what mattered most and how it felt. In order to apply the right styling at the right time, we needed to add the class of the device we wanted to be displayed to the HTML element using JavaScript.

setTimeout(function() {
      device.removeClass('desktop').addClass('tablet');
}, 9500);

setTimeout(function() {
      device.removeClass('tablet').addClass('phone');
}, 11500);

In conclusion

Jumping straight into coding the ad definitely helped us figure out a few things early.

Designing and coding the ad in parallel helped us to understand what could and couldn’t be achieved and it meant we were able to deliver the final product earlier than expected without backtracking. However, we found that focusing on specific animations between devices made us forget about how the ad would work as a whole. The result of this was redundant code that was probably more complicated than it should have been.

Overall, we had a lot of fun working on this project. It was great to be able to experiment with the code and learn a few new things about how CSS animation works.

See the final ad

Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.

Subscribe

See why 200,000 companies worldwide love Campaign Monitor.

From Australia to Zimbabwe, and everywhere in between, companies count on Campaign Monitor for email campaigns that boost the bottom line.

Request a demo