Inspiring HTML5 Banner Examples with GSAP

[Bradley Lancaster 16 Likes (Newbie)]

5 hours ago, pfluffernutter said:

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

 

 

These are all really cool and unique great work! 

[kellyimaging 2 Likes (Newbie)]

@ryanrabon 

Wow, I'm so impressed by your banner animations!

http://rabondigital.com/

I especially love the History Channel and the Cremo examples on your site.

I'd love to hear more about your workflow for creating your sprite sheets, for the Cremo birds, for example.

Do you export out of AE or Adobe Animate?

 

Thanks!

~K

[yiki 1 Likes (Newbie)]

Hey Hi everyone! What incredible pieces of work you make!

Im new in the business, I've started with Js GSAP and advertising about a year ago but I want to share this one I made in january.

https://bit.ly/2GakuUs

 

I'm still learning everyday so I hope to one day be like you guys

 

[Dipscom 2,815 Likes (Superhero)]

Nice one mate. Keep at it and there's no telling how far you'll go.

 

 

[ryanrabon 34 Likes (Newbie)]

On 2/20/2019 at 5:49 PM, kellyimaging said:

@ryanrabon 

Wow, I'm so impressed by your banner animations!

http://rabondigital.com/

I especially love the History Channel and the Cremo examples on your site.

I'd love to hear more about your workflow for creating your sprite sheets, for the Cremo birds, for example.

Do you export out of AE or Adobe Animate?

 

Thanks!

~K

I really appreciate it

Yeah, for those birds I exported out of after effects to create that sprite sheet. Don't hesitate to reach out with any questions.

Cheers!

Ryan

[Bradley Lancaster 16 Likes (Newbie)]

On 3/14/2019 at 1:38 PM, yiki said:

Hey Hi everyone! What incredible pieces of work you make!

Im new in the business, I've started with Js GSAP and advertising about a year ago but I want to share this one I made in january.

https://bit.ly/2GakuUs

 

I'm still learning everyday so I hope to one day be like you guys

 

Awesome work on the animation mate. I noticed it's also fully responsive well done!

[ryanrabon 34 Likes (Newbie)]

Just finished up these beauties. Was a collaboration effort, and I built out the random/dynamic leave animations for both...

 

http://rabondigital.com/html5/goco/discover/index.html

 

http://rabondigital.com/html5/goco/taleoflove/index.html

 

Enjoy!

[Bradley Lancaster 16 Likes (Newbie)]

Hey guys, just uploaded some Suncorp Bank work you can view on the link below.

 

https://bradleylancaster.com/portfolio/suncorp-bank-digital-programmatic-advertising-html5/

 

Cheers,

Brad

[NDF 17 Likes (Newbie)]

Wow! I've marvelled at the 'Tanks' ads I'd seen around; amazing work Volcanoflash! Must be fun as well.

Here's my ads page >> https://www.andyfoulds.co.uk/banners/html5_banners/

 

BTW - I use Brave browser and ad-blockers on Chrome and many of the example sites here show-up as blank. When showing work on your portfolio it's a good idea to use the GSAP CDN links - rather than the Google or Sizmek hosted ones - remove any clickTags and ad-size metaTags. It's a pain but avoids a potential client seeing a blank square if they also have ad-blockers in place.

 

Andy___F