Jump to content
Search Community

Inspiring HTML5 Banner Examples with GSAP

Carl test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 11
Link to comment
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 ;)

Link to comment
Share on other sites

  • 5 months later...

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 10
Link to comment
Share on other sites

  • 1 month later...

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
Link to comment
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
Link to comment
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?

Link to comment
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. 

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

  • 2 weeks later...

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
Link to comment
Share on other sites

  • 3 weeks later...

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
Link to comment
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
Link to comment
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.
×
×
  • Create New...