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

  • 2 months later...

Hi dear community!

I know you missed new releases with HERO banners. Today I present 3 of them!

 

Please give us feedback if you like them.

 

1. World Of Tanks — Take Control

18953089_432544847119074_6221341026120590666_n.jpg.6e4746be1a2b4e6196e34234ce455a18.jpg

 

Animation here

 

 

2. World Of Tanks — Video 360°

19397054_456353128072917_8901310704862665574_n.jpg.aa1ef38afa7a949ce7f5c6d80d5bd969.jpg

 

Animation here

 

 

3. World Of Warships — Dunkirk Collaboration

Pic-Template.jpg.83674a2c08e22a0ada1cc3ae992daf9b.jpg

 

Animation here

 

Thank you!

 

  • Like 10
Link to comment
Share on other sites

  • 8 months later...
  • 4 weeks later...

I wonder how much you guys charged them for something like this Digital Banners. Specially the interactive once. Also I wonder what application do you guys use to make those canvas animations? Cheers!

Link to comment
Share on other sites

  • 7 months later...
  • 1 month later...
Link to comment
Share on other sites

  • 2 weeks later...
On 12/3/2018 at 6:47 PM, Marlon said:

Wow! completely blown away by all the work!

 

How do you guys keep the images so crisp? Do you build the ads on bigger resolution then resize to final spec?

 

@Marlon Yeah it's best practice to use at least 2x resolution images if you can fit them, also, tinyPNG is a life saver.

@ryanrabon Nice work on that GoPro piece

Link to comment
Share on other sites

@Marlon Using Svg's for custom text, logos, graphics reduces file size and will always look crisp. This allowed you to bump up the quality of raster images. I also use Tinypng plugin for photoshop to reduce any png's and use Photoshop's save for web.

 

Some Ads i have created recently had a specification of under 40kb.  These Battery World ads are 100% SVG and came in around 32kb compressed.

 

http://bradleylancaster.com.s3.amazonaws.com/display_ads/BATTERY_WORLD/BW0740_XMAS/4_CLIENT_PREVIEW/preview/index.html

 

 

Link to comment
Share on other sites

These are all so awesome!  Thanks for sharing.  I can share a couple. The ones I am most excited about (of course) have yet to hit market so are still secret.

 

Raid Foaming Wasp Spray.

Lots of art. File size was challenging.  All the foam was created by manipulating one small replicated foam graphic which had different textures on each side.  By changing size and rotating/flipping the one piece we were able to get a whole frame of foam for a very small file size hit.

http://pfluffernutter.com/portfolio/banners/SCJohnson/raid/banners/300x250/index.html

 

Spinning NFL/PEPSI cup for Buffalo Wild Wings

Use of step ease to flip through spinning cup sprite sheet.

http://pfluffernutter.com/portfolio/banners/BWW/Pepsi-BWW-NFL/banners/300x600/index.html

 

Draino   Animated hair clog

No explanation needed LOL

http://pfluffernutter.com/portfolio/banners/SCJohnson/draino/banners/300x250/index.html

 

 

  • Like 2
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...