Animated html5-banner ads - rise OR decline of creative input

@petester I would be extremely grateful if you could share them with me. I am great need of some inspiration of ads, and also in dire need of seeing how they are built!

I know that GumGum use Hype for their ads, this is the main reason I started using Hype! However I really need to learn all of the different ways of creating ads so I know I am using all the resources possible

Thanks for feedback everyone as well super interesting !

I am joining in. The last three years that I have been using Hype for banner animation I have not seen a decrease. I can add that statisch Banners are popular but will not take away the need in animating banner. What I’d really like to see it an allover standard.

I am really tired or having to produce different banners output for each adserver.

Since a year now mouse-/TouchOver has become popular. Like adding these.

Produce Banners for North Germany.

I fee like hype should have some sort of a checker or a validator to check for latest ad server definitions before hype exports. Right now its a hit or miss since the ad servers always change their guidelines.

Well last I read from Daniel. They keep their scripts up to date.

Hi guys,

Just wanted to add my 2 cents into the discussion.

I’m a front-end developer who works in a large advertising agency and primarily create html animated display ads & digital screen signage for our clients.

I’ve been working in web design since '95 and used to use Flash when it was big, followed by Greensock JS up until about 3 years ago when I switched to Hype which is fantastic.

I’ve seen an increase in animated html display ads over the last couple of years so think the OP may have just had a blip with their clients. Display ads are big business and we go through huge amounts of them in our studio to supplement large campaigns for major clients.

Hype is a brilliant tool for allowing me to very quickly create animated html and export to various network specifications. Looking forward to seeing the program grow in the future.

I can't back this enough, I am not sure why but I think the subtle mouse over (even if accidentally) are really popular....

This is actually great to see so many people here that create Animated banners. Is there anyway we can set up a separate thread ( or here ) to start sharing our ideas and examples? I would love to have a little base camp to share banners

Indeed... I also didn't know we where so many here. :slight_smile:

Hi all. :slight_smile:

Do you all inset the ad choice oam I made?

I think the best animated mouseOver I got true by a costumer was the BOSCH one:
https://www.hirschen-group.com/agencies/zgh_allstars/clients/bosch/bhr/bhr1170024/

@Bendora

I replied to the post, super interesting!

We don’t design any mouse-over effects for client jobs as we thought these arent viable for mobile platforms with touch screens.

The BOSCH ads above are interesting - have these been used as they would not pass the IAB / Google DoubleClick requirements for stopping all animation after 30 seconds, these keep on animating the background imagery infinitely.

The mouse over effect is triggered on a tap on mobile screens, but ‘holding’ the ad to simulate a hover doesn’t do anything. Has anyone had any luck replicating the hover state in this way at all?

https://drive.google.com/open?id=1N0NUOlSf4QKEjyjdUWTm56_sW0birDUU

AdsInspiration.zip (43.8 KB)

2 Likes

Very interesting, can you just have a fall back for mobile that it auto plays? I am assuming this is what happens??

Ok I only looked at 3 and my mind is blown by a couple... lol...

How on earth did you create the Uber Card? Is everything done in Hype? I can't even begin how you have the 3D card transition and reduced it all to 150kbs.

Ok I have watched it 10 times and my mind is blown... the possibilities!!!!!!!!!

Yes some of them are pretty clever and well presented. It’s important to know these are not my ads. These are a collection of ads I’ve saved since late 2017. You can save future ads too, just do what I do when I see an ad worthy of saving.
Since majority of these ads are google ads, google ads add characters at the end of the url just remove the characters after .html and you should be good with saving to your bookmark.

My work can be seen here
http://petesblog.atwebpages.com

I have to say, some of my work is made with the help of team tumult @jonathan, @daniel and the good people of this forum via the examples they share.

3 Likes

Ah great I will take look through some of your stuff as well :slight_smile: !

While we are on it, how the hell did they do that advert… can someone confirm if it works on IE or not ? it looks like they used CSS 3D Transform… which wouldnt work on all browsers :open_mouth: !..

No one cares about IE anymore. Its dead, and those that do have it and use it are in the past and are at fault, not the creator of ads. Besides, mobile devices rule over desktop devices and mobile devices are up to date more or less when it comes to rendering.

Haven’t had a complaint, Jaywing. I know they want us to cut at 30 seconds.

To simulate the hover effect on a touchscreen is a tricky one. One would expect that touchscreens would scan the screen for movement and notice the difference between touch and hover. But no such thing is out there on the mobile market.

@tekkon

Hi Lee!

Are You referring to the "parallelogram" elements that animate from the plane of the card - transforming to rectangles?

If so - You can do that just with Hype.

Here is an example created by @MattDArmstrong:
3D - "real" 3D space - 3d effect 2.hype.zip (23.5 KB) - note the file size.

The source thread is here.
Matt's post is the fourth one down.

Sample screen capture - one of (3) transforms shown. There also is a reset button ("R").

1 Like

And then some wonder why people install adblock. :crazy_face:

1 Like

This is awesome.... its ashame I work with Japan and they ALWAYS for some reason look at things on IE.. :(.. but this is going to be awesome for banners in the future..

Play in banner animation on hover bothers you?... you must have some issues :stuck_out_tongue: lol

You got to look at this way, the generation that we're in is all about advertising and catching peoples attention the best way possible. From the perspective of companies, the fact that they're a distraction is actually the point believe or not its something to stop you from reading/browsing, and whether you click on it or not is up to viewers discretion. The point is, the ad is delivered. A better question, how effective is the delivery and how unique is the ad? Lets take a look, Go to https://bannerboy.com/ - look at all of their ads in case studies TomTom, LG, Spotify and others.

Question: Would you click on a static ad or would you click on an animated? Personally, I'd click on an animated, while static is static, it doesn't tell the story hence the word static aka boring.

Their services: First and foremost comes the HTML5 animation and the development everything else comes secondary in chain of events this is what they're pushing for.

  • HTML5 animation & development
  • Motion design
  • Bespoke automated scale production

Deliverables

  • Standard + rich media banners
  • Facebook + Instagram videos
  • Localization
  • 100,000+ units delivered

I hope this gives you a rather different perspective when it comes to the wants and needs of companies rather than publishers. Publishers will always have a problem with moving ads.

1 Like