Jump to content

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

Using GSAP in HTML banner ads

Go to solution Solved by retropunk,

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

I'm a Flash convert so my first instinct with JS is to go with GSAP. I thought I'd be ok building ads this way, but uncompressed the source is just too big for Doubleclick. I think I may be able to get away with it though if I could find a way to lose the CSS plugin. Is it possible to "translate" my code so I can remove the CSS plugin?


I'm doing stuff like this:

_tl.to(iBack_div, 12, {y:"-160px",scale:1.01, ease:Power1.easeInOut }, "step1")
.to(iFore2_div, 12, {y:"14px", scale:.999, ease:Power1.easeInOut }, "step1")
.to(iFore1_div, 11, {x:"-145px", y:"-100px", scale:.999, ease:Power1.easeInOut }, "step1");


Nothing earth shattering but I'd hate to have to rebuild the whole thing. Any help would be appreciated.

Link to comment
Share on other sites

Hi JakeK  :)


if i understand correctly what you meant , actually you need CSSplugin . seems DoubleClick server can handle Gzip files and they uploaded TweenLite, TimelineLite, CSSPlugin to their CDN .


for more info pls check this post : http://greensock.com/forums/topic/7227-greensock-js-and-doubleclick/?p=42958

  • Like 1
Link to comment
Share on other sites

Holy crap you're my hero. I've been trying to use their horrible authoring tool, all sad and whatnot. Thanks, if they still give me grief I'll be back here.

Link to comment
Share on other sites

  • Solution

You can use GSAP no problem.

My team has been using GSAP with DoubleClick for over a year now with no significant issues.

The trick is to keep everything as small as possible and minimal calls to the server.


Most DC ads we build on average look like this when they are uploaded to Studio and Previewed


index.html (Enabler and Polite Load)

script.min.js 25k gzipped (TweenLite, CSSPlugin, EasePack, Custom Utilities and then the code for ad)

styles.min.css 1k gzipped (Use Texture Packer to create your css and sprite, then crush your PNG with your favorite PNG crusher)

sprite.png 25k crushed






Depending on the size of the campaign we use the DC Assets Library quite a bit. Once you realize the power of this feature you will change how you build DC ads.


As far as their authoring tool, do you mean Google Web Designer? It's a bit clunky at first but it is really useful once you get the hang of it. It's specifically tailored for DC Studio ads. If you used Flash you can figure this tool out. The pros outweigh the cons with GWD in my opinion but with anything, it depends on your project needs. ;)


I hope this helps

Good luck

- Patrick



  • Like 3
Link to comment
Share on other sites

Wow that's super helpful, thanks. I'm new to this side of things so I only understand about half of what you said. I don't know how to gzip, for one thing, and I've never heard of a PNG crusher! I've been doing my sprites by hand so Texture Packer should save me a bunch of time, too. I also need to investigate the DC Assets Library.


As for GWD, it seems like a ham-fisted animation program, like Flash 2 or something. It may be just the thing for the simple jobs so I can just bang them out, I've found the animations to be jittery, especially next to what you can do with GSAP.


Seriously thanks for your help. I've been trying to figure it all out on my own, with many late nights.

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