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

Share this post


Link to post
Share on other sites

@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

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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

 

:)

 

  • Like 2

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 5

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

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. 


  • Recently Browsing   0 members

    No registered users viewing this page.

×