Animated Advertisement Inspiration

Advertising
1

Greetings Hype users, we wanted to share a big array of animated ads to inspire and make you think outside of the box when it comes to designing your next ad(s). Most of these ads can be accomplished using Hype.

If you'd like to contribute from your list you've spotted and or saved let @Daniel or @petester know so that we can properly add them in to the list.

Heres how you can bookmark/copy URL of an ad

  1. In Safari Right Click and select Open Frame in New Tab

newtab

  1. When switching to the new tab press the shortcut ⌘+D to bookmark it or just copy the url from the address bar.

*If the ad doesn't show up, try deleting the tracking parameters string which is a mix of numerical and or text after .html and hitting enter.

**Recently Added **
////////////////////////////////////////////////////////////////////////////////////////
Adidas Star Wars Sneakers :new:
Cathay Pacific Airlines :new:
New York’s 529 College Savings Program
The Chauffeur :new:
The Chef :new: :cyclone: variation
The Doctor :new: :cyclone: variation
On Job Less :new: :cyclone: variation
Yahoo Finance Premium :new:
Google Home Hub :new:
Verizon - Samsung Galaxy S10 Promo :new:
Advil Unbeatable Strength to Conquer Tough Pain :new:
Advil Liquid Gels :new:
Best Buy 2019 Holiday Theme
AMD Powered Laptops 2019 :new:
Thats a Big TV :new:
TLC Tvs :new:
Facebook Portal :new:
Lenovo Yoga 2 in 1 Laptop
160x600 :new:
300x250 :new:
Phillips Hue Smarter Home :new:
////////////////////////////////////////////////////////////////////////////////////////

Command+click on links to open in a new tab.

A

Acura ILX 728x90
Acura Lease 300x250
Acura TLX
Adidas Star Wars Sneakers :new:
Adorama
Advil Liquid Gels :new:
Air Canada 728x90
All State 728x90
Amex US Open
Amex Gold Card 300x250 728x90
Amex - The Blue Cash Everyday Card 300x250
Amex Express Check Out
Amex Dinner 2x Points
Amex Business 75,000 Bonus Air Points
Android One MotoX4

B

Best Buy
AMD Powered Laptops 2019 :new:
Intel Powered Laptops
Cyber Monday 2019
Black Friday Gift Card 2019
From Latest Tech to Perfect Price TV 728x90
HP PCs
Samsung QLED Up Their Wish
BlackFriday
Best Cruise Line Overall
Bronx Zoo Passport to the World
Bugaboo Full Line Up of Strollers 300X600

C

Captain Morgan - Go Full Captain
Captain Morgan Cannon Blast - Drop it Like its Shot
Canon EOS 6D Mark II
Canon EOS R System
Canon EOS R - Be the Revolution
Cathy Pacific Airlines :new:
CapitalOne
CDW
Chillis To Go Curb Side 300x600
Chillis To Go 728x90
CHRYSLER Pacifica 300x600
CNN Anthony Bourdain Parts Unknown
Comcast Business Beyond Fast

D

Dell 300x600
Dell 728x90
Delta Hydro Rain 300x250
Digitaland Promo
Dodge Challenger GT 300x250
Dodge RAM 1500 728x90
Duracell
Trust Is Power
Power Epic Quests For Longer - Quantum
Star Wars Power Long Lasting Imagination :new:
Indianapolis Snow Storm - Outlast the Dark :new:
Dyson Pur 300x600 728x90

E

Epson: Where there's Business Theres Epson 300x250 - 728x90
Epson The SURECOLOR P5000 Printer

F

F-Secure - Brand Awareness DE
Filippo Berrio
Fiat 124 Spider 300x250
Ford Year End wide
Film Struck
Fixael.nu Enkelt. Snabbt. Billigt. :new:
Fresh Empire Live Tabacco Free 300x250

G

GMC Sierra 2500 HD
GMC Terrain Denali
Google Express Launch
Google Home Mini
Google Home Hub :new:
Google Science Fair - Make Drone Fly Faster

H

Harvard Business School
Hilton Hotels - Stop Clicking Around :new:
Honda
Civic Hatchback
FIT 2019 + Sport Edition 300x250 :new:
Change from within
Master the Sport of Style
Collision Mitigation Breaking System
Best Subcompact by US News
HULU
Hyundai 160x600
Hyundai 300x250

J

Jeep Compass 728x90
Jeep Renegade
Jeep Cherokee 2019
Johny Walker Joy will take you further

K

L

LG G8x ThinQ Dual Screen :new:
Lincoln Continental '17 728x90
Lexus
LX - One Part Sanctuary, One Part Fortress
LS500h Beyond Measure Live in the Now
The One Letter GS F :new:
The All New Three Row RXhL+RXL :new:
The First-Ever UX 2019 300x250 | 728x90 :new:

M

Maytag Appliances 300x250
Metro PCS
Microsoft Which Laptop Pc Is Better 300x250 - 728x90 - 970x250
Microsoft Excel 300x250
Microsoft Office 365 - Outlook 300x600
Microsoft Surface Go 728x90
Microsoft Surface Go 300x250
Microsoft Windows Intel Mixed Reality 300x250
Microsoft VR Computing 300x250
Microsoft VR Computing 728x90
Mile 22 Movie 300x250
MIni
Mopar Tires 160x600

N

New York's 529 College Saving Program - The Chauffer :new:
New York’s 529 College Savings Program - The Chef :new:
New York’s 529 College Savings Program - The Doctor :new:
New York’s 529 College Savings Program - On Job Less :new:
Nike Air Max
Nikon - The New Mirrorless Z7
Nikon - Im The Next Chapter D850
Nestea International
New Balance 1080 Beautifully Cushioned Ride :new:

O

Oxygen Pretty Strong adventinve

P

ParkWhiz 300x250

R

Renault
Roomba When The Going Gets Tough
Roomba The Difference

S

Sage Finance 300x250
Sony Be Alpha #1 Mirrorless Camera Brand :new:
300x250 729x90 v1 | v2 | 900x600
Sling 300x250
Sling 728x90
SlingTV 160x600
Subway Raising the Stakes on Steaks
SquareSpace MIY Artist 728x90

T

T-Mobile 300x250
T-Mobile SyncUP Fleet
Target Ads Richmedia
T-MOBILE 300x250
TomTom Sports Touch Fitness Tracker 300x250
Trident Gum, A burst of Something New
Triscuit

U

Uber Visa card 300x250
Uber Visa card 728x90

V

Vanmoff Bicycles - The new Electrified S2 & X2 :new:
Verizon - Samsung Galaxy S10 Promo :new:

W

Wendy's DoubleStack

Whirlpool Refrigerator

Y
Yahoo Finance Premium :new:
YouTube TV 728x90

BannerBoy Brain Archived Ads
Primo Ads, where primary focus is 3D
Omnivert 3D VR/AR Ads

Article
Tips for Animating Photos In Ads by BannerBoy

6 Likes
3

I just took a quick glance… the first looks like it uses custom particle effect code. The second is more simple with clever video and parallax usage.

4

Updated: The second one might just be easy to accomplish looking at its just image sprites from a video with the guy and the girl. Looking at the resources

2 Likes
5

High-impact visual choreography combined with Greensock GSAP power easing!

6

Jan-Feb 2019 Update! New Ads have been added from Sony, Honda, Canon, Amex… Enojoy!

5 Likes
7

That banner is no longer available online. I’d love to see it. Pete, did you happen to capture it, and still have it, by any chance?

8

I just found this post, this is great! I’ve done this sort of banner isolation for myself, but have never seen a public resource like this. Thanks, guys! I’ll contribute as I come across good ones. I’ve noticed more and more when I try to open banners in a new tab, they come up blank. From what I can tell, it’s due to taking out the publishing page’s connection.

A couple of examples:
https://tpc.googlesyndication.com/safeframe/1-0-32/html/container.html
https://secure-ds.serving-sys.com/BurstingRes/Site-74530/WSFolders/12134322_5//index.html

Always a bummer when that’s the case. Let me know if there’s any kind of workaround when that happens.

1 Like
9

Hey there, thanks for the kind words, mind telling us what ad you clicked on? Generally, we stay away from googlesyndication served ads as they tend to die out quickly. Google Ads served on s0.2mdn.net is what works the best, sometimes its tricky to get them to work but we've figured out a way to display them. The key is to remove everything after HTML as those are analytics/tracking details. We'll be adding new ads shortly and one of them is a hype/gsap ad designed by our talented forum member and contributor.

11

Do you know what ad from within this forum you clicked on?

12

Sorry Pete, I wasn’t terribly clear. The links I’m giving are from the wild, not provided in this forum. However, the G-Star Raw Interactive Carousel link here is broken.

13

Some bannerboy ads were deleted by the company so I went ahead removed them from the thread. Let me know if there are other ones that cant be displayed. Sometimes it takes a good few 5-10 seconds to load.

1 Like
14

New ads added, Enjoy! A few more have been added.

Adidas Star Wars Sneakers :new:

Cathay Pacific Airlines :new:

New York’s 529 College Savings Program - The Chauffeur :new:
New York’s 529 College Savings Program - The Chef :new: :cyclone: variation
New York’s 529 College Savings Program - The Doctor :new: :cyclone: variation
New York’s 529 College Savings Program - On Job Less :new: :cyclone: variation

Yahoo Finance Premium :new:

Google Home Hub :new:

Verizon - Samsung Galaxy S10 Promo :new:

Advil Liquid Gels :new:

2 Likes
15

Nice text animations with the Samsung ad!

16

These looks really great:

https://bannerblog-775b5.appspot.com.storage.googleapis.com/posts/-L7-5jAza8BgPB34GZ-Z/banner/1520420124542/f-secure_brand-awarness_300x600/index.html

https://bannerblog-775b5.appspot.com.storage.googleapis.com/posts/-LXZOknJNxplcbzZk-gd/banner/1548946221175/cubica_newbalance-1080_300x250_W/index.html

https://s0.2mdn.net/3975371/1537456354192/index.html

https://i.cdn.turner.com/ads/adspaces/CNN/2018/04/18/990412135/970x250/ABPU_Series_S11_Premiere_Sustaining_970x250_HTML5TC.html?clickMacro=https://adclick.g.doubleclick.net/pcs/click%3Fxai%3DAKAOjsu6y5ufrJJgx5MF0Izy1dHALnzUVx1d2AY7mTPURIkAUthiVAVwpXmElK2UUosy7xWlkOr_XgcLlXvEvq12P_E-e-r6AK70tIiu0Xoud-Wohz4b0b8GnV6CECss78hGfMxpS1ecKGo4mT5J5ckjI-JOY3yVllB2XG03K-hkfbWqBQDaAiuXKx2nDOtwQch_85E857Rfz0E_tqcqt4EZefJoeiigMHficweKjyMdjVdxljVDZtfV_RXKT6K9kCEV8OtfTrFmcA8jaQ%26sig%3DCg0ArKJSzPFxvImeBBgoEAE%26urlfix%3D1%26adurl%3D&clickTag=https://cnncreativemarketing.com/project/abpu

https://bannerblog-775b5.appspot.com.storage.googleapis.com/posts/-L6q0idATFxWh4_vVMNZ/banner/1520251005187/captain-morgan_cannon-blast_300x250/index.html

and quite curious what is the technology of the video embedded?

https://s0.2mdn.net/4864311/1533951169155/index.html

1575647241584
1575647241584.jpg1039×842 121 KB

1 Like
17

This is a regular HTML5 video. Those events are normal DOM events: HTMLMediaElement: loadstart event - Web APIs | MDN

<video x-webkit-airplay="allow" webkit-playsinline="true" playsinline="" muted="" src="https://d193mxkscv6mty.cloudfront.net/M22/progressive/INP_300x250/STX_Entertainment_M22_300x250_Prog_resolve_video.mp4" style="width: 100%; height: 100%;"></video>

18

Thanks Daniel for your great support:grinning:

1 Like
19

True, Embedding videos and adding Interactive elements are where its at now when it comes to ads. Take this one for instance, its got a swipe interaction. Im noticing the key to getting it right is to know where to apply easing and what effect works with what asset.

Nike Soccer Sneakers - Built for Brilliance :new:

1 Like
20

though, there’s no video used in this ad … html5-animation and canvas

21

true above ad is not video enabled, I was just generalizing that video enabled and or interactive ads are on the rise and gave an example of an interactive ad.

1 Like
22

Just received a great collection of fresh ads from http://www.electricart.co.nz/, a New Zealand creative advertising agency – they’ve been all in with Hype for the past 18 months and just hit 500 million impressions.

You might also notice a sweet looking Hype animation on their home page:

Their style of sharp text over highly optimized video loads surprisingly fast:

3 Likes