Jump to content
GreenSock

Carl

Inspiring HTML5 Banner Examples with GSAP

By Carl, in Banner Animation. Views: 119,820

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

Posted
We continue to A\B test banner mechanics. The following asset is an interactive version of the banner to promote British Cruisers in World of Warships.

London Bridge, Thames and Union Jack in front of the camera quickly set up the gloomy mood and you should be ready to destroy enemy ships in the British fog. Fire!

 

Pic.jpg
  • Like 2
Link to comment
Share on other sites
Posted

Hello All,

Here is my first project.  Two frames so to speak.  The font on the second one has me puzzled.  I think I have handled it the same as I did on the first, but it behaves differently, unless my eyes are fooling me. To me it appears to scale and move up instead of just scaling up from the center.  Can someone let me know what I'm doing wrong... if I am?

Thanks,

Ken

 

See the Pen NRBNoY by Art_Maverick (@Art_Maverick) on CodePen

Link to comment
Share on other sites
Posted

I cannibalized the Burger Boy Banner coding, if it looks familiar on the coding side.

Link to comment
Share on other sites
Posted
Life of the cruisers and battleships in World of Warships is not that easy as it seems. You should constantly dodge torpedoes and air attacks. Only skilled commanders can survive till the battle end.

 

Here is the banner that demonstrates all the challenges and remind users about the old times when brave mariners strike for their countries with pride!

 

Pic.jpg

  • Like 1
Link to comment
Share on other sites
Posted
"You shall not pass!" - tankers were screaming...

Imagine the situation when you are fighting the enemy on the bridge when suddenly the bridge breaks down and there is no way out. The only thing you can do is to ram your enemy down to hell! 

This can be described as "ultimate physics DEMONstration".

 

Enjoy banner here!

 

Pic.jpg

  • Like 3
Link to comment
Share on other sites
Posted

 

"You shall not pass!" - tankers were screaming...
Imagine the situation when you are fighting the enemy on the bridge when suddenly the bridge breaks down and there is no way out. The only thing you can do is to ram your enemy down to hell! 
This can be described as "ultimate physics DEMONstration".
 
Enjoy banner here!
 
Pic.jpg

 

 

 

Impressive as always @Volcanoflash!

Link to comment
Share on other sites
  • 2 weeks later...
Posted

Nice SVG masking, particles, spritesheet animations and all. Professional DOM banners! Could You please describe Your workflow a bit?

Thank you very much! I appreciate it. Of course! Coming from a strong development background with a lot of big agency experience, I've had the opportunity to learn from great coders. With that said I strive to hand code all js, css, and html using best practices and as much as I can keep file size minimal as possible. Anything more specific you would like me to elaborate on?

  • Like 1
Link to comment
Share on other sites
Posted

Thank you very much! I appreciate it. Of course! Coming from a strong development background with a lot of big agency experience, I've had the opportunity to learn from great coders. With that said I strive to hand code all js, css, and html using best practices and as much as I can keep file size minimal as possible. Anything more specific you would like me to elaborate on?

 

Hi Ryan,

 

Great banners! Many thanks for sharing them!

Great structure and approach overall! (I've gone through some of them).

I'm new with GSAP (brilliant platform) and I have few quite simple questions based on 'Infinity ad' example.

 

- You're linking pictures through CSS background. Why not placing pictures by <img> tags? Because of easier access and control?

I thought having <img> tags with alt="info" is better in semantic sense.

 

- I see there was a need to use custom fonts. Why haven't you used text converted into svg curves instead of spritesheet?

 

Thanks,

Vitaliy

Link to comment
Share on other sites
Posted

Hi Ryan,

 

Great banners! Many thanks for sharing them!

Great structure and approach overall! (I've gone through some of them).

I'm new with GSAP (brilliant platform) and I have few quite simple questions based on 'Infinity ad' example.

 

- You're linking pictures through CSS background. Why not placing pictures by <img> tags? Because of easier access and control?

I thought having <img> tags with alt="info" is better in semantic sense.

 

- I see there was a need to use custom fonts. Why haven't you used text converted into svg curves instead of spritesheet?

 

Thanks,

Vitaliy

Hi Vitaly,

 

Thank you very much! Yeah, I typically use css background when building out banners, but when it comes to making websites semantically <img> tags are the way to go. Really you could use either one for banners, it's really personal preference.

 

A colleague started that infiniti banner, and did some of the setup. It was handed off to me to finish it up. He had already setup that sprite sheet with the copy, but I typically and prefer to work with svg. For that client I think we had to support older versions of IE which doesn't play nice with svg.

  • Like 2
Link to comment
Share on other sites
Posted

Hi Vitaly,

 

Thank you very much! Yeah, I typically use css background when building out banners, but when it comes to making websites semantically <img> tags are the way to go. Really you could use either one for banners, it's really personal preference.

 

A colleague started that infiniti banner, and did some of the setup. It was handed off to me to finish it up. He had already setup that sprite sheet with the copy, but I typically and prefer to work with svg. For that client I think we had to support older versions of IE which doesn't play nice with svg.

 

 

 

Many thanks for the answer, Ryan!

Now that is clear! :)

Link to comment
Share on other sites
Posted

Many thanks for the answer, Ryan!

Now that is clear! :)

My pleasure, Vitaliy! :D

  • Like 1
Link to comment
Share on other sites
  • 1 month later...
Posted

Pic.jpg

 

Hello coders!

I haven't been publishing new banners for a while, it's time to solve this issue. So here is the brand new banner for ASIA region.

 

Some facts:

1) First CUSTOM banner for ASIA

2) Banner is the part of a complex "Think tank" campaign

3) We developed special logo and style for the campaign that you can see in the banner

  • Like 3
Link to comment
Share on other sites
Posted

Hi Volcanoflash,

 

Great banner! Love it like each one before!

The only thing. It's not sharp on retina/high dpi. Sorry maybe someone asked before but -> why don't use svg or al least @2x bitmaps? Performance? IE support? 

 

Cheers

Vitaliy

  • Like 1
Link to comment
Share on other sites
Posted

Hi Volcanoflash,

 

Great banner! Love it like each one before!

The only thing. It's not sharp on retina/high dpi. Sorry maybe someone asked before but -> why don't use svg or al least @2x bitmaps? Performance? IE support? 

 

Cheers

Vitaliy

 

Hi Vitaliy,

 

The first point is that we perform only for desktop advertising campaigns. 

The second is Google Adwords 150 kb limit.

 

P.S. Thanks for your warm feedback!

  • Like 1
Link to comment
Share on other sites
Posted

Here is another cool case.

 
Hunting season in NA starts in autumn so the team though it would be cool to set up a campaign. Luckily we had such an old banner with a deer. The only thing we had to do is to adopt it from Flash to HTML5.
 
Pic.jpg
  • Like 2
Link to comment
Share on other sites
  • 4 weeks later...
Posted

I've just recently launched my new site with all my new and recent HTML5 banner work. It also includes some of my previous work in Flash. Happy viewing!

 

http://rabondigital.com

 

Cheers,

 

Ryan Rabon

  • Like 4
Link to comment
Share on other sites
Posted

Nice work, @ryanrabon (and everyone else as well - love seeing these demos of GSAP-driven animations). 

  • Like 1
Link to comment
Share on other sites
Posted

Nice work, @ryanrabon (and everyone else as well - love seeing these demos of GSAP-driven animations). 

Thank you very much!! I love GSAP!!! It's been such a pleasure using it to build out animations.

  • Like 2
Link to comment
Share on other sites
Posted

Hi @ryanrabon,

 

I tried looking at your site, but it's pretty unusable. Like a lot of newer computers with Windows, I have touch screens, but it doesn't mean I'm using them. So this is ignoring all my mouse clicks...

if(Modernizr.touchevents) {
  type = 'touchstart';
  type_filters = 'touchend';
}

It does however work correctly in IE/Edge, but that's because they use pointer events instead of touch events, which you aren't testing for.

 

You should assume everyone has a touchscreen because you can't detect one. Running this simple demo produces very different results on my computer in Chrome/Opera, IE/Edge, and Firefox.

See the Pen f5ae913609aa684073d0572a69425741?editors=0010 by osublake (@osublake) on CodePen

 

Is there a reason for doing your events like that? Managing touch and mouse is really difficult, and every browser has their own quirks. For example, in webkit browsers, it fires touch and mouse events separately, so you have might to call event.preventDefault() in your touch handlers to prevent a mouse event from firing immediately after your touch handler gets called.

 

EDIT: I just noticed PointerEvents have been added to Chrome 55! That should eliminate those double touch/mouse event calls.  :D

 

If you really need separate events for touch and mouse, my suggestion would be to use a battle tested 3rd party library like...

- PointerEvents Polyfill

- Hammer.js

- Interact

 

... and even GSAP's Draggable. That may not be what it was designed for, but it's still my go-to solution for handling complicated interactions as it has a nice pointer event object to reference.

 

.

  • Like 5
Link to comment
Share on other sites
Posted

Here are a few I did:

 

Palm Breeze: < 200kb standard

portal.bannerwave.com/_banners/Bannerwave/porfolio_updates-122016/palm_breeze_new_digital-300x600/index.html?var=42778.633734556635

 

Cruzan Rum: < 200kb standard

portal.bannerwave.com/_banners/Bannerwave/porfolio_updates-122016/cruzan_rum_plinko-300x600/index.html?var=68246.90835355349

 

HP: < 200kb standard

portal.bannerwave.com/_banners/HP/1C16DemandGen/300x250_Pegasus_ksp1/release/index.html?var=42029.51572603979

 

Tony Roma: <200kb standard

portal.bannerwave.com/_banners/WI/waltonisaacson-tonyroma-all_recipes/theexercise-300x250/index.html?var=18404.558042498364

 

Equal: (40k)

portal.bannerwave.com/_banners/Tris3ct/PO-4569_Equal_Spanish_Banners/Equal_Equity1_Span_300x250_r1/index.html?var=66514.75963372392

 

Coke: <200kb standard ( font link seems to have been broken )

portal.bannerwave.com/_banners/Bannerwave/Coke_160x600_ShareAName/index.html?var=49559.26741685848

  • Like 6
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
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account