Carl

Inspiring HTML5 Banner Examples with GSAP

Recommended Posts

Came across some cool HTML5 banner ads while doing some casual browsing and figured I share them:

 

Verizon Fios (GSAP): 

https://s0.2mdn.net/3950987/1441292307159/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600.html

 

Jeep (GSAP + EaselJS): 

http://s0.2mdn.net/ads/richmedia/studio/pv2/38170525/20150831144144032/

 

Muppets (GSAP):

https://s0.2mdn.net/4139733/1440792288892/300x600_MPT_Muppets_LightRB_HTML5_Sept22.html

 

Google Music (GSAP + SVG)

https://s1.2mdn.net/ads/richmedia/studio/pv2/37557754/20150731072517615/

 

Do you have any HTML5 GSAP ads to share? We would love to see them

 

  • Like 7

Share this post


Link to post
Share on other sites

wow, thanks for these! I'd love to see more examples, especially not using SVGs and maintaining a smallish filesize. How'd you find these btw? 

Share this post


Link to post
Share on other sites

Hi doubletakest,

 

Welcome to the GreenSock forums.

I found the ads just by using Chrome and going to news.google.com and randomly clicking around a bunch of sites. When I see a cool ad I right-click on it to verify it isn't Flash (so few are these days!) and then select "inspect element". This gives me a view of the page source of the element I clicked on. There is usually code somewhere nearby that says:

<iframe src="someserver.com/theAd.html">

Some aren't as easy to figure out, and in that case I just move on ;)

Share this post


Link to post
Share on other sites

I wouldn't call my stuff inspiring but I will pluck some of the work I have done up and place a couple of things here soon(ish).

 

(Time measured in days - not minutes).

  • Like 1

Share this post


Link to post
Share on other sites

Pic.jpgPic.jpg

 

Hi, banner lovers! 

I want to share some beautiful banner stuff from me & Wargaming.net team.

We work on pure JS <canvas> and our creatives are <150 Kb weight and Google Adwords adopted. Of course we use TweenLite in our banners because we love it.

Hope you enjoy this links:

http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wows/torpedoes/

http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wot/refuel/

 

I you like this two just ask here in the comments for new ones and I show much more. 

Thanks!

  • Like 8

Share this post


Link to post
Share on other sites

Hi VolcanoFlash,

 

Enemy Destroyed!

 

Great banners. Silky smooth. 

Yes, post more if you like. 

Share this post


Link to post
Share on other sites

Pic.jpg

 

 

Are there any fishing fans among forum users? We have something interesting for you!

This banner targets special narrow audience of our potential World of Warships players such as fishing lovers.

Let it be such kind of a test that will show us whether it works or doesn't.

Target audience: Males, 30+, fishing is their beloved hobby
Message: Hunt the ocean's biggest game

P.S. Never underestimate an old man with a BOAT.

 

http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wows/fishing/

  • Like 2

Share this post


Link to post
Share on other sites

Awesome! 

 

How much time did it take to develop this ad? Could You please describe Your workflow in a few words? As I see, this is a hand coded canvas with multiple DOM canvas layers. Did You make other size mutations? 

Share this post


Link to post
Share on other sites

Awesome! 

 

How much time did it take to develop this ad? Could You please describe Your workflow in a few words? As I see, this is a hand coded canvas with multiple DOM canvas layers. Did You make other size mutations? 

 

 

Hi, Oliver!

 

Our team has a bit complicated flow:

1. idea, based on targeted audience

2. draft storyboard + interactive description

3. final storyboard design + copywrites

4. animation & programming (3-5 days)

5. QA

6. resizes design

7. resizes animation & adaptations (20 resizes only for Google Adwords)

8. resizes QA

9. texts localization (35 languages)

10. all banner resizes localization (20 * 35 = 700 banners in one set only for Google)

11. banner localizations proofreading

 

Most of these processes are doing simultaneously with different teams. Banner localizations are automated with self-written tool (adobe air). 

 

We prefer pure canvas + JS + TweenMax because of great banner weight control, great cross-browser capabilities and good performance.

  • Like 2

Share this post


Link to post
Share on other sites

The banner looked very nice but I did not notice any difference in the result based on what the meter level was when I cast.

I felt kind of tricked. Is there a goal or a way to win that I am missing?

 

fyi, this page seems to bypass the facebook warning: http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wows/fishing/

Share this post


Link to post
Share on other sites

The banner looked very nice but I did not notice any difference in the result based on what the meter level was when I cast.

I felt kind of tricked. Is there a goal or a way to win that I am missing?

 

fyi, this page seems to bypass the facebook warning: http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wows/fishing/

 

Hi, Carl.

 

We used first frame as Eye Catcher for being involved in interaction. There is no result dependancies with distance bar. The only result is unexpected transition to the warship. 

 

Sorry, but I don't understand your message about Facebook. Could you give me a bit more detailed information?

Share this post


Link to post
Share on other sites

regarding facebook, your link takes me to this page first:

lX7h4yB.png

 

Go to the link you posted above and either rollover it and watch the status bar or copy the link to see that it has facebook as the domain.

 

http://prntscr.com/asb04b

 

Thanks for the additional info.

I definitely like your banners and I encourage you to post more here, but I still was hoping that was an actual game element involved as I spent time trying to hit the meter at the right time. It might work to get interactions but perhaps not so much for happy users. Just my 2 cents. 

Share this post


Link to post
Share on other sites

regarding facebook, your link takes me to this page first:

lX7h4yB.png

 

Go to the link you posted above and either rollover it and watch the status bar or copy the link to see that it has facebook as the domain.

 

http://prntscr.com/asb04b

 

Thanks for the additional info.

I definitely like your banners and I encourage you to post more here, but I still was hoping that was an actual game element involved as I spent time trying to hit the meter at the right time. It might work to get interactions but perhaps not so much for happy users. Just my 2 cents. 

 

First, thanks for notification about my broken link. It was copy-pasted from my FB@Work and I replaced it with correct one.

 

Second, thanks for your feedback. This banner is still in QA and our team can make some changes in it. I'll try to push variable final result!

 

Also tomorrow I'll show some more interesting stuff for all banner lovers!

  • Like 1

Share this post


Link to post
Share on other sites

Pic.jpg

Pic.jpg

 

What could be better than showing a game's mechanic in the banner? Especially using project's style and tone. And this is the first time we applied the same idea for both our favorite games: World of Tanks and World of Warships.

 

WoT Sniper Sight:

http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wot/sniper_sight/

 

WoWs Sniper Sight:

http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wows/sniper_sight/

  • Like 2

Share this post


Link to post
Share on other sites

Nestea640x360.jpg

 

http://www.bannerhost.hu/nestea/Nestea_Erdei_640x360_01c_SIZMEK/

Smooth scaling (I hope), reused assets.
Café Next

default.jpg

http://www.bannerhost.hu/fressnapf/Fressnapf_Marcius_640x360_ADVERTICUM_03/

It was hard to implement, don't look at the code, it's ugly :)
Inframe


default.jpg

 

http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/

A simple particle engine.
Café Next

toyota.jpg

http://www.bannerhost.hu/toyota/tcm/TCM_Tactical_JANUARY_topky_anim_300x600_SK_02/

A little wheel and chassis work.
Saatchi & Saatchi

They are all DOM/GSAP based.

  • Like 6

Share this post


Link to post
Share on other sites

Oliver, really nice works. Definitely love your style!

 

I'm glad that someone else has something interesting to show and inspire others.

 

P. S. Already looking for useful tricks in your code!

  • Like 2

Share this post


Link to post
Share on other sites

Very nice, Oliver. Thanks so much for posting. Very slick and professional.

 

VolcanoFlash, I really enjoyed shooting the tank! Sweet!

  • Like 2

Share this post


Link to post
Share on other sites

Hi all, I am totally new to GSAP,  I have watched some tutorials & the webinar & thought I would share my first effort creating a banner ad.

 

I have been using Adobe Edge Animate, but wanted to learn how to build using Greensock.

Im not sure I set up my code in the most efficient way just yet, but I can produce a banner so thought I would share for all the other newbies out there.

 

Cheers Brett...

http://client.adtorque.com/clients/brett/2016/GSAP/templates/300x600-sale-test/index.html

  • Like 3

Share this post


Link to post
Share on other sites

Nice work, Brett. Thanks for sharing.

  • Like 1

Share this post


Link to post
Share on other sites

Great work, Craig. They look beautiful!

 

Thanks for sharing.

  • Like 2

Share this post


Link to post
Share on other sites

Pic.jpg

 

UEFA EURO 2016 is marching through time and soon it will reach our eyes and emotions!

Our development team is polishing a brand new FUN Football mode at the moment, so we can enjoy playing football while playing World of Tanks!

For Publisher this is a good event to stick to, make extra PR and provide our players with DOUBLE FUN.

There is our new banner-set will be blasting worldwide among other marketing activities. So, please, check it out and make sure you score a goal!

 

Play banner: http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wot/football_2016/

  • Like 4

Share this post


Link to post
Share on other sites

Pic.jpg

 

4X strategies are among our team's beloved games. We were super excited to know that we can be a part of the Master of Orion game revival. This is our input on this project. The banner has classic animations and is non-interactive. We tried to stick visually to the release trailer and stick to the release artwork so all the release marketing campaign to be synergistic.

 

Enjoy banner: http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/moo/launch/

  • Like 4

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.