Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Carl

Inspiring HTML5 Banner Examples with GSAP

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

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! 

  • Like 1
Link to comment
Share on other sites

  • 4 weeks later...

@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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

  • 3 weeks later...

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

 

Link to comment
Share on other sites

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

 

:)

 

  • Like 2
Link to comment
Share on other sites

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 :D

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

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

  • 2 months later...
  • 2 months later...

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

  • Like 6
Link to comment
Share on other sites

  • 10 months later...

Been a *HUGE* fan of GSAP for *YEARS*!!!
So much that I built my website with it: https://www.shigimcp.com
(The design is a few years old, and this is my development sandbox, so please be forgiving. LOL!)

NOTE: the only projects on the "hilites" page that *doesn't* use GSAP are the Ichiban Yofuku and MiMi websites and the 3D stuff which was done with Maya and Unity (as a newbie).

  • Thanks 1
Link to comment
Share on other sites

  • 4 weeks later...
  • 3 weeks later...

<off topic> i see all these wunderful banners and I'm still stuck on gwd...(I'm a designer and newbie coder)

does anybody have a step-to-step plan to archive banners like this..?

 

I know that it is build with index.hmtl / js / css...but I'm coming nowhere ;-(

 

 

  • Like 1
Link to comment
Share on other sites

On 8/24/2020 at 3:50 PM, cartimundi said:

<off topic> i see all these wunderful banners and I'm still stuck on gwd...(I'm a designer and newbie coder)

does anybody have a step-to-step plan to archive banners like this..?

 

I know that it is build with index.hmtl / js / css...but I'm coming nowhere ;-(

 

 

I would also love if someone knew about a guide for this. I manage HTML, CSS, JS, but don't know how to start 

Link to comment
Share on other sites

On 8/24/2020 at 2:50 PM, cartimundi said:

<off topic> i see all these wunderful banners and I'm still stuck on gwd...(I'm a designer and newbie coder)

does anybody have a step-to-step plan to archive banners like this..?

 

I know that it is build with index.hmtl / js / css...but I'm coming nowhere ;-(

 

 

 

So with GWD and something like Adobe Animate.

A lot of people will use the GUI to layer and composite their creatives, and then go into Code View/ActionScripts Panel and write GSAP code there.

 

You label each element on the stage and then use JavaScript / GSAP to animate it how you want.

 

When I was learning, I took a Flash banner and then tried to recreate the same thing using HTML + GSAP.

 

I broke apart the file to its constituent graphic elements.

Used HTML to layer them as they are in Photoshop

CSS to position their starting values

JS/GSAP to animate them to their final positions

 

Try doing the same with a CodePen, get a reference animation you want to copy and then try to re-create it.

 

Good luck!

  • Like 4
Link to comment
Share on other sites

  • 4 months later...
  • 2 weeks later...
On 7/11/2017 at 12:56 AM, volcanoflash said:

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!

 

Hey @volcanoflash the work is very unique and inspiring. These ones seem to be Password protected?

Link to comment
Share on other sites

  • 3 months later...

Here is a new promo video of the Rich Media Dynamic Remarketing Creative i have been working on that uses Google Studio and Google Marketing Platform.

 

Greensock,

Flickety Slider,

Studio SDK,

A lot of custom code 1200 lines of Javascript. 4 template styles works in IE11+ and other browsers.

10,000 products via XML feed updated daily automatically.

Promo video i created in Adobe After Effects.

 

 

 

  • 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.
×