Using GSAP in HTML banner ads

[JakeK]

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");

 _tl.play();

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

[Diaco]

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

[JakeK]

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.

[retropunk]

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

backupImage.gif

 

 

 

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

 

 

[JakeK]

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.