geedix

This is an interesting question to me, having based my career on animating banner ads. I think it is easier to make mistakes in animated ads. You need a persistent CTA and very brief, concise messaging. We once did a series of elaborate animated ads for Old Navy, and were told that they ended up just running the static backups when it was found that they were outperforming the animations.

I forked your demo and added SVG boxes: https://codepen.io/geedix/pen/WBWvva?editors=1111

You can definitely target SVG with TimelineLite. Did you give your <g> elements the same IDs that your divs are using here?

If these are your specs - https://advertising.amazon.com/resources/ad-policy/en/technical-guidelines - you can have up to 10 server calls. You might want to put some images into spritesheets. I wouldn't recommend base64 images in banners, due to file size like joe_midi said.

CPU issues tend to be a huge concern in our banner development, because we're always trying to make unique animations that stand out from the templated banner crowd. Atmospheric effects, interactive elements, pans and zooms with large bitmaps, nested animations, masked type — these things can cause processors to chug. CPU drag was also a problem in the Flash days, but we could do the kind of vector effects that the OP is asking for in this thread; blurs and filters were available cross-browser, often at the expense of performance.

Hi, Neil. We use both approaches where I work. Often, a hybrid of both in one banner. Some kinds of complex animation, like cartoony things or animated masks, really need a timeline to build efficiently. We recently did a series that used Animate for a logo animation in a canvas tag, but the rest of the banner was html with GSAP. One shortcut in hand-coded banners is to keep all your image files the full dimension of the banner. So if you're building a 300x250, you end up with a stack of divs holding 600x500 transparent pngs, scaled to 300x250 for crispness on high density displays. Without Animate, type is usually done as images. The advantages of web fonts don't apply so much to ad banners. We don't care much about SEO, copy and paste functionality, accessibility or responsiveness in an ad banner with fixed dimensions. A web font isn't worth the file size and trouble, unless you need dynamic type, in which case you need to look into font subsetting and hope you can use web fonts. I don't think you need an app for your banners, just a text editor, some patience, and some examples to look at. Try Google's 728x90 here: https://support.google.com/dcm/answer/3145300?hl=en - good luck!

Hmm. Hard to guess without seeing the ad. You can have lots of assets, and you don't have to use special video methods. You're not bringing the enabler class in twice? I've had decent response using the help chat that's under the question mark in DC Studio. Good luck.

They're looking for this line in your html file: <script src="https://s0.2mdn.net/ads/studio/Enabler.js"> </script> Then make sure your click-throughs and other events are using their Enabler class.

I did this when it was still Flash. I had some trouble just getting the feed into the unit out of Google Docs, but otherwise, it was pretty smooth. The geo data is just available via the enabler. Curious to know how your project goes (or went).