Banner-style Animation with GreenSock-powered JavaScript

I personally think it would be wise to switch to javascript(especially using Greensock’s v12) because then your possible market would double, including iPhones and iPads. 
I’ve been playing around with HTML5 and the Canvas element also because I had to translate a Flash animation to pure HTML because they wanted to be able to show it on an iPad. I can tell you, including all the if statements for the variable video codecs etc. is a lot of work, but fun to figure out!

Given
that HTML ads will be on pages where there are any number of CSS styles and
other JavaScript references, we have to take great care in naming conventions
for HTML tag id selectors, CSS styles/classes, and JavaScript
properties/methods so that things don’t result in a conflict.  One way to avoid the CSS issue is to use
inline CSS styles where possible if file size is not that big of an issue.  With javaScript, put all logic within an
object/class scope so that you have a single unique top-level reference.  Also, adding detection for if jQuery already
exists on the page or not will determine if you use your own wrapper function
to select elements or default to jQuery. 
In real world scenarios, a one line script include points to a dynamic
server-side script that sends back the applicable css, js, html etc. all
bundled up and minified as JavaScript. 
So the src attribute for the script include may point to a bannerGen.php
file of whose output ends up being minified JavaScript that dynamically loads
assets, styles, creates HTML on the fly and invokes jQuery/Greensock stuff to
display and run the animation.

Another big issue will be the image file sizes. With Flash you can compress a png32 file with jpg like compression. Without Flash all of your transparent pngs will be full sized. It has been a while since I worked in the banner ad space, but when I did the file size restrictions were always very tight (~40k).

From what I understand there are some ad companies have a few HTML based banner ads out there now, but the market is really limited. As others have mentioned, file size of the JavaScript library & image assets and the risk of the banner playing havoc with the parent page being the two big barriers right now.

“Is javascript suitable for banners?” Of course it is. 

Web devs have gone to great length to show that you can do **everything** with JS. The question is do the host environments provide an efficient and secure way to package, distribute and sandbox your ads? 

If you are to replace Flash then html and ultimately the browsers have to provide a mechanism to do so. It could as simple as a custom tag working much like an iframe, tightly sandboxed so it doesn’t interfere with the host plage. 

The web is mostly ad based. With businesses like Google and Facebook backing HTML5 in all its glory, you would think that these animated “JS” ads would be a non event and industry “standard”, right?

Carl

I havent been on your site in a while since i abandoned the as3 ship for jquery, but love the new greensock jsapi stuff you have been doing. I have yet to get a chance to play with it myself but keep up the great work

Thanks Randall, all good points. My guess is that the networks that traffic the ads will have to enforce really strict guidelines. Hopefully some sort of standard or “best practices” can be established so that we don’t have to do things totally different for every type of ad. wishful thinking;) When I think of the trouble a simple clickTag has caused for people, I can’t imagine how this is all going to get figured out.

also thx for sending me the sample files. I haven’t gotten to look at them yet but as soon as i read your comment i thought “man I wish I could see something like that to understand it better” nice.

I agree. In recent years 40kb seems so silly. A typical page on the apple site weighs nearly 2-3mb, with the proliferation of broadband 100k for ads is more to my liking;)

thanks matthew I totally agree. from a file management perspective QA perspective it is a whole ‘nother ball game than just uploading a single swf.

interesting suggestion with the tag. and with all of facebook’s work into giving developers so much api access for page and app development I’m really surprised that they aren’t pushing the barriers of rich and dynamic advertising. 

Thanks a bunch Doug, I appreciate the encouragement. I still have a heart for Flash but have to say that I’m finally getting excited about the potential on the other side of the fence. I’ve said it before, GSAPv12 is going to really help Flash devs get a foot in the js world.

Also, loving the “best iPhone yet” comment even though it’s an Android based phone xD
(I especially like this because I’m NOT an Apple fanboy, but true to Android)

Finally! Someone who can appreciate my humor! thanks bud.

Hi there!
I’m in Sweden I haven’t seen many if any ads here so far done in js.I still work a lot in flash but now things are really getting interesting (as you mentioned) when it comes to the creativity that you can acheive outside of flash with html & js. I feel really excited about all of this – at first I felt a little sad about flash loosing ground but I guess it will still be around a while longer. Most of the flashwork I do now is either ads or offline work like multimedia presentations for touchscreens & such. Almost all webwork is css, js & html.Regarding the placement for the layout of graphic elements & css – the canvas would be the way to go but then there is so far some serious issues with browsers supporting that tag or not.
There is a great open source plugin for illustrator that anyone interested in working with the canvas tag should check out – with it you can export vector, images etc. with placement & all to the canvas tag. http://visitmix.com/labs/ai2canvas/ 
You can even animate with it but I will look into using it for exporting the layout & then using Grant Skinner’s EaselJS from the really interesting CreateJS suite http://createjs.com to work with a displaylist & AS3 type of coding but instead of using the tweenjs from CreateJS-suite I will start experimenting with Greensock’s JS-port…Exciting times…

Niklas

Greensock’s library has some pretty slick features, but I think in the ad realm, using JS for animation is just a temporary solution. I think the not-so-distant future will be all CSS transitions and animations, with javascript simply applying classes to set states. Having a tool to generate those animations will be very useful since its kind of a pain.

Already right now, you could do a pure transition based animation system for mobile devices ads. 

When dealing with styling, the new scoped CSS feature will be very useful (also in the future when its in the wild) http://css-tricks.com/saving-the-day-with-scoped-css/

who asked you? take your crazy somewhere else!

lol. Thanks a bunch Matt. That is a very interesting angle. Thanks for contributing to the conversation. Very curious to see how this plays out.
Best,

-carl

I’d have to respectfully disagree with Matthew’s comment about CSS transitions taking over in the future. They are perfectly fine for simple transitions from one set of values to another, but they aren’t capable (as far as I know) of serious animation tasks. They don’t provide precise controls over the timing or easing. Try creating a CSS3 transition that uses an Elastic.easeOut
or SlowMo.ease and then jump to 0.72494-seconds into a 2-second
transition and pause() only to resume() later. It’s impossible from what
I understand. What if you want to animate custom values like carouselRotation on some object? What about rounding values or callbacks or building out a complex sequence and skipping to a particular spot and/or reverse smoothly at any point (easing included)? Can transitions easily be killed on-the-fly, leaving the object where it currently is?

A lot of developers fundamentally disagree with scripted animation being defined in CSS because it doesn’t seem to belong there – CSS is generally for style markup. Not that we can’t change that, but should we?

Maybe the browsers will remedy the current shortcomings in CSS transitions and all agree on a feature set and syntax. Anything is possible, but at this point I don’t see it as a realistic expectation (at least anytime soon).

Just my 2 cents (keep the change)

So we already have/had a very powerful and useful tech in flash and we decided we need to step back and make an alternative because one man proclaimed it was bad. All these new ideas for replacing flash to me have come off very primitive and really taking a step back. Do i agree that some things can be handled better outside of flash yes, but thats not to say everything flash does should be replaced and dumbed down. Banner ads have a very restrictive 40k limit which limits what you can do. If they were to increase the k size you would have a lot more innovative banner ads. My guess is they won’t do it, which is stupid to still be under a 40k limit with broadband. But they most likely will expand the limits to give more k size for .js ads. Essentially this may allow those other techniques to catch up to flash when in reality if you were to give that extended limit to flash new ideas in banner ads would be created.

Try get coordinates using http://www.spritecow.com Could make life easier.

I recently had to produce a few dozen ads that had the typical file size of 40k, 30 seconds and then stop. It involved rotating some objects in 3D and scaling some text. All good in flash using tweenlite. However, we where then asked to make them using Javascript as HTML5. So I applied Flash CS6 tech to the party and ouput directly from Flash after turning everything into timeline animations (which was a right pain trying to get any decent easing). 

The HTML5 banner and MPU output files where 80k+. I replaced the Flash output images using the original Fireworks compressed versions, but they whole file package still came to 80k. Not a problem (said the advertising company). NOT A PROBLEM! We spend hours trying to squash flash files down to 40k, and HTML5 big fat files is NOT A PROBLEM!  ggrrrrr.

Hilarious, and I feel your pain.  I’ve been struggling with the 40k-60k range on some HTML banners (not even HTML 5 banners – yikes) and it’s nearly impossible with any cool creative or meaningful animations.  100k will be the minimum for most HTML rich media, or it should be… and I say we as developers don’t sacrifice the quality of the images/animations resulting in the ad itself being so uncool and non-visually compelling due to excessive image pixel munchkinization.

I’m 100% with you Jack!  Cramming all that animation login into CSS is counterproductive and overcomplicated.  This notion and trend that somehow CSS is the ‘controller’ within the MVC or MVP paradigm for an interactive HTML website is beyond my comprehension.  Whatever happened to the ease of control by means of ‘composition’ using JavaScript, CSS, and HTML combined?  CSS should not try to play in the sandbox of JavaScript.  And for the most part, JavaScript should let CSS do its job without much interference.  Plus, the Greensock JS Animation Platform will strike down any notion or trend that CSS is the home for such ‘animation control’.

And… don’t forget about the CSS issues, where most styles will either
have to be ‘inline’ to avoid conflicts with anything else on the page or
uniquely named/structured (if that’s even possible 100% of the time).
Think about the MSN or Yahoo or AOL sites and all their content… can
you even imagine the number of styles, selector ids, and JavaScript
namespaces/properties/methods being used?  The challenge will be how to
package up the HTML, CSS, JavaScript, and other relevant JS frameworks
like jQuery or Greensock JS Animation Platform, etc. and keep them
paying nice with the hundreds and hundreds of things on the page and
stay within file size restrictions.  Not to mention having
detection/evaluation logic/code to determine if jQuery or Greensock, or
other custom JS/CSS should or should not be included because it might be
already included on the page somewhere – or will be included later on
the page after the fact.  Yikes. Double yikes. 

thanks for sharing, nice

Hi Jack, you have some good points, and a lot to respond to. so bear with me a bit…

First off, if I were making a complicated JS timeline animation that needed to be mobile and desktop, I would use GSAP and it would be glorious. But a simple banner that was mobile only, I think could be done with CSS today.

It might be really stupid and time consuming to do it with CSS today, but I’m hoping that will be less so in the future.

You’re definitely calling out specific examples that are the strong points of your library (and are totally awesome), but they probably are not the majority use cases. I’m gonna make an unsubstantiated claim that most ads use fade, some movement, maybe some scaling, and mostly simple easing, maybe easeOutBack. All of which are not an issue with transitions. 

Then if you include CSS Animation, the possibilities are greater (but increasingly time-consuming to code) Complicated animations have been prepackaged that include things like elastic easing.
http://www.joelambert.co.uk/morf/
http://daneden.me/animate/

However, customizing and making those cross-browser today and for the next few year(s?), is a pain.Louis Remi is tracking expected behaviors vs current behaviors of transitions in this page:http://louisremi.github.com/jquery.transition.js/transition%20bugs/index.htmland you’ll see several of your problems here, and I agree that they are not up to snuff. Some of the things you describe could be done in a simpler way…but it would be really complicated. Again, I wonder if those are normal use cases, or the exceptions in the banner world.

On the issue of separation of CSS and JS for behavior, I don’t think it matters much, and is a bit of a logical pitfall. Also, probably at one time Flash’s timeline was the place to do animation, and AS was strictly behavior. But things change, and in the end whatever works easiest and best is what we’ll use.

It seems silly to say that a class that has display:none (to hide) is OK, but setting a rule that animates that transition from visible to hidden is crazy and should be done with JS only. Or the case of a balloon that I want to gently hover back and forth. I should have to create a script that moves it back and forth? I see behavior and presentation as pretty loose terms with a lot of overlap.

But, file size is obviously the other big issue with banners, and having to include 20k of scripts before you even do a single thing could be a deal breaker for some situations like the 40k limit mentioned here. And of course CSS is baked in and free.

 Great discussion, Matthew. I think one of the dynamics that might be at play here is a fundamental paradigm difference between hardcore interactive developers who have been immersed in the Flash world for years and are used to extremely rich animation tools and the other camp who has been mostly building static pages with the occasional need for a neat “fade in” here or there. No doubt those things can be pretty easily accomplished with CSS3 (although browser support is still kinda spotty and the syntax is a pain with the vendor prefixes) and I don’t blame that crowd for wondering what the big deal is – they don’t need much more than what they already have with CSS. But we Flash people slam into the limitations of CSS3 very quickly. We need event notification, we need to know exactly where an object is in its state of transition, we need very precise control and a rich system for setting variables, reacting to things, etc. We need a real programming language but that simply isn’t what CSS is built for.

There once was an HTML tag specifically for making something blink. I’m sure there was a group of people who thought that was totally appropriate and cool at the time. “I don’t want to have to write a script just to make something blink”. Then there was the other crowd: “But HTML is for markup, not animation”…”really? What’s the big deal? It’s convenient to have a blink tag and browsers can accelerate the rendering…” What if I want the blink to have longer intervals? What if I want it to get slightly bigger as it blinks? What if the blink should fade up/down? Well, we could put more style attributes in there to describe the change over time…blink-speed=”2s” blink-size=”1.5em” blink-fade=”true” blink-ease=”ease-in”, etc. This could quickly get out of hand. Presentation and behavior/animation are very different beasts in my opinion and should remain distinct.

It may be true that many HTML/JS banners currently only employ fades and x/y movements but as things shift and the creatives start coming over from Flash I think that’ll change. We’ll see some mind-blowing creative work in banners that goes beyond fades and x/y movement, but only if we get the toolset right.

As far as file size goes, that’s an interesting one because of CDNs and browser caching and browser prefixes, etc. Did you know that the CSS library you linked to above is over 70k and it doesn’t have nearly the flexibility that most creatives would want? If the ad industry can standardize on a js platform (kinda like what has happened for jQuery as a selector & more), that could work out really well because it would get cached in the browser and get used for all the ads. Then the animation code for the actual ad would be very minimal. It’d probably be less than if things were done in pure CSS because of all the extra browser prefixes and hassles with trying to get things to animate correctly in CSS.

In the scheme of things, my [admittedly biased] opinion doesn’t really matter anyway. I guess we’ll see what happens as the industry changes and gets more tools. I trust that ultimately, top developers will guide the industry where it needs to go and the best toolset will emerge. That very well may be CSS for animation. I’m excited to see what happens. Thanks again for engaging in the discussion.

Back from a refreshing long weekend unplugged. I don’t want to break Carl’s comment box, so this will probably be the last.

File size is a tough problem, and with the huge influx of cheap android devices in developing nations and the overburdened mobile networks, bandwidth will be a serious concern for years to come.

CDN seems like a good solution like jQuery, but the payoff actually isn’t that great when you start factoring in versions. its surprising. I’ve seen a few articles on it, and the % of cached visitors is low. Here’s one example

http://statichtml.com/2011/google-ajax-libraries-caching.html

Plus the ad industry doesn’t seem too agile with adopting new technology. They basically got it working in the late 90s and set it on autopilot . I think getting them all to work together on a JS lib might be just as hard as getting the browser makers to agree on syntax and spec and get rid of prefixes. And you as a a librarian might have some problems with this.

So lets say they standardize on GSAP, everything looks great to start with. Then maybe you come up with something new and amazing, or you streamline the animation loops and boost performance in v13. But the ad networks just want something that works so they keep v12.0.0 forever. Then ad devs have to use v12 syntax forever and miss out on all the gains from new versions. Maybe it wouldn’t go down like that, but it seems sadly plausible.

Even a huge community project like Drupal has this problem with jQuery, they are stuck on an old version because so many modules depend on 1.4 or 1.5 and might break. Old ads couldn’t be run with new code without a risk of breaking them.

I think with animate.css and any lib you should just grab only the pieces you need to keep size down. I wonder if GSAP could do something similar to other online builders, where you choose the features you need and it gives you a lean custom package.

a few examples:

http://jqueryui.com/download

http://www.initializr.com/

I agree that tools will probably guide the industry, so I’m glad that you put so much thought into yours. Keep up the good work.

Hey Matt,

Thanks so much for continuing to share your insight. I look forward to force-feeding you GSAP goodness until you fully submit;)

I did some poking around the css3 animation side of things. I found the general structure of the code to be sort of nightmare-ish. Trying to align multiple effects based on what % of time into the total duration of animation certain things should start seems horribly difficult to maintain. I really can’t fathom anyone trying to hand-code anything that looks like this:

css3 banner: http://tympanus.net/Tutorials/AnimatedWebBanners/index.html
css3 banner css source: http://tympanus.net/Tutorials/AnimatedWebBanners/css/style.css

(note the css source is for 2 banners, but half that code is still insane)

I could probably bang out that banner in a dozen lines of TimelineLite code max, playback would be much smoother and I would be able to very easily offset/adjust the timing of any element. That banner was the first one I found, I’m sure there are better examples that are more efficient and perform better. 

I’ve investigated Sencha Animator and I’ll admit the end results are fairly impressive. The timeline-based IDE hides all the coding horrors from the developer but you are fairly limited in terms of run-time flexibility or the plethora of benefits of having your animation code-driven. 

Even with a tool like Sencha that can make css3 animations fairly painless to create, I still think it is going to suffer the same file-size woes of other technologies. There is no getting around the raw weight of bitmaps and fonts that account for the majority of file-size of any banner. sure having to load a js library will incur some kb hit, but in the grand scheme of things it very well may be worth it in order to serve the largest audience.

All that being said, I’m not knocking css3. it definitely does some cool stuff and the CSS shaders that adobe is working on are totally insane: 

http://www.adobe.com/devnet/html5/articles/css-shaders.html

–

the interesting thing about this conversation is that, as you said, the ad networks have been seemingly running on auto-pilot since the 90s. 

The world’s top developers could all agree on the tech that is the best for creating animation outside of flash and it won’t mean a thing until a delivery mechanism for these “new ads” is in place.

Are they looking for a solution to completely replace Flash? or just the option to have a fancy fall-back for iOS devices? Is their attitude let’s get on iOS first and worry about android and IE7 later? Or are they truly looking for a 1-size-fits-all forward-thinking solution?

There are so many variables to consider and pros and cons of each tech. Security is certainly a big one. I can only imagine that these folks have to see the writing on the wall and are racing to bring something to market.

Thanks again for all your input and support. And don’t worry, I have configurated the comment box to always allow for your participation.

-carl

Wow. This certainly is an active comment session!
For my two pennies, once all browsers behave the same towards CSS, HTML etc ad infinitum then maybe yes, JS banner ads will eventually replace flash based ones. But I can’t see that happening anytime soon. IE6 still lurks around the corner for a huge amount of companies, tied into a certain system, so upgrading for them isn’t such an easy thing as it is for the rest of us. And here is where Flash comes in. So long as they have a reasonably up-to-date flash player, then away you go. You can do pretty much anything without worrying about hacks for all the different display problems in browsers.Anyway, I support the best tool for the job. Flash is that tool at the moment, but that’s not to say that JS doesn’t have its place in the flash world. You just pick your tool, and code away! If anything, Greensock porting over to JS as well as Flash is all the more incentive to learn some new skills, add to the CV and generally be more useful to clients. And that can’t be a bad thing!Right, dinner time. Much respect fellow snorkl’rs!Merrick

Wow. This certainly is an active comment session!
For my two pennies, once all browsers behave the same towards CSS, HTML etc ad infinitum then maybe yes, JS banner ads will eventually replace flash based ones. But I can’t see that happening anytime soon. IE6 still lurks around the corner for a huge amount of companies, tied into a certain system, so upgrading for them isn’t such an easy thing as it is for the rest of us. And here is where Flash comes in. So long as they have a reasonably up-to-date flash player, then away you go. You can do pretty much anything without worrying about hacks for all the different display problems in browsers.Anyway, I support the best tool for the job. Flash is that tool at the moment, but that’s not to say that JS doesn’t have its place in the flash world. You just pick your tool, and code away! If anything, Greensock porting over to JS as well as Flash is all the more incentive to learn some new skills, add to the CV and generally be more useful to clients. And that can’t be a bad thing!Right, dinner time. Much respect fellow snorkl’rs!Merrick

Wow. This certainly is an active comment session!
For my two pennies, once all browsers behave the same towards CSS, HTML etc ad infinitum then maybe yes, JS banner ads will eventually replace flash based ones. But I can’t see that happening anytime soon. IE6 still lurks around the corner for a huge amount of companies, tied into a certain system, so upgrading for them isn’t such an easy thing as it is for the rest of us. And here is where Flash comes in. So long as they have a reasonably up-to-date flash player, then away you go. You can do pretty much anything without worrying about hacks for all the different display problems in browsers.Anyway, I support the best tool for the job. Flash is that tool at the moment, but that’s not to say that JS doesn’t have its place in the flash world. You just pick your tool, and code away! If anything, Greensock porting over to JS as well as Flash is all the more incentive to learn some new skills, add to the CV and generally be more useful to clients. And that can’t be a bad thing!Right, dinner time. Much respect fellow snorkl’rs!Merrick

No doubt Flash is better in many situations, but regarding the IE6 point, I’d encourage you to consider what portion of the audience uses IE6 versus the portion that views the content on iOS devices – which portion is bigger and which one is more important to the decision makers of today? I suspect that given the choice, most corporate decision makers today place a much higher value on iOS compatibility than IE6, so Flash loses that battle pretty quickly (I wish that weren’t the case though). Mobile device browsers are quickly becoming a major portion of the audience and unfortunately that’s an area that Adobe has pretty much conceded.

Very true. Executives playing on iPads is the latest thing it would seem these days, and it’s a real shame that flash is excluded from this. However, a quick export for iOS and hey presto, a nicely running native app, with chocolatey smooth tweening, loading etc from yourself! 

I think it’s an awesome thing that you’ve ported over to Javascript, and just from going over Carl’s tutorials, its a less intimidating process with a framework that we are now familiar with (Greensock). I’m way behind in developing in anything other than flash (I came from a design background), but I can see this as a huge gateway into that world, where I can offer solutions for all formats (eventually, once I’ve done some reading!). 

Hey Carl,

Great post and working example of Greensock JS. I’ve recently used it to create a mobile banner ad. Since I’m very familiar with the AS counterpart, I had a good handle on how the timelines work. Like you, I found it a bit painstaking to gather element coordinates via the Photoshop file, then log them in to the CSS, but overall it was a smooth process. The file works great in all browsers, but is targeted for mobile devices. I’m working in Eclipse, so I’m looking on how I can use a mobile emulator to test. One other thing to note, is I’m working with the AdMob API. The AdMob tech’s said they had issues with the file not working correctly. They saw I was using the Greensock JS library, and thought that might be the culprit. Since I don’t have a mobile emulator to test with, I’m not able to see what they’re seeing.

In any event, Greensock JS works great in browsers, but seems to have some issues running on mobile devices. I’ll do some more testing and let you know what I uncover.

Thanks,

Blake 

 Glad to hear things are working well for you now, blakeferm. I’d LOVE to hear about any potential conflicts/bugs on mobile devices. I’m not aware of any at this point, but please do swing by the forums at http://forums.greensock.com and drop us a line if you get any more info about what AdMob’s techs were talking about.

Happy tweening!

Hi Blake, thanks so much for the info. I’ve seen numerous GSAP JS demos running on my iphone and no one has mentioned any problems with android in the forums. Very strange. Please keep us informed if you reveal what the culprit is or if you get more info from AdMob.

-carl

iPhones and iPads are not double the market, I don’t know where you got that stat from. The industry is moving towards mobile but iOS is still a small portion of the web market share as of now in the US.

I went through and check the file size of this banner and it is 3 times the size… if not 4X than that of a typical Flash banner. This ad is 127K with JS and PNG files. Banner ads are restricted to 40K.

See for yourself…
https://dl.dropbox.com/u/1256960/Resource/TestJS/GreenSock%20Animation%20Only.html
I stripped out the background to be fair, because that was an uneeded 9K… you could just have a solid color back there.

I went and optimized all the PNGs you had with ImageAlpha and got the thing down to the smallest possible files size… 81K. But thats twice the size of what is actually allowed for banners.
https://dl.dropbox.com/u/1256960/Resource/TestJS_Compressed/GreenSock%20Animation%20Only.html

boring and not snappy as flash…

thats awesome man, i am a big fan of the greensock tweening platform in as3 ive been using it for a while now, and recently i discovered that there is the js animation i havnt tried it yet didnt had the time too but its going to happen realy soon.a new era is coming shah

Hi Carl, Regarding getting the positioning coordinates. Since I have to build swf files too using timelineLite, I’m building out the iPad versions starting within Flash. I keep my timelineLite timing as perfected in Flash. Resize my files for the iPad and getting my instance/image positions from Flash. I think it’s much more accurate than trying to determine from Photoshop. So my workflow is Photoshop –> Flash –> HTML5. Since I’m so comfortable in Flash I’d feel way better getting the animation approved first there. Then translate to HTML5. 

Does that make sense to you?

Michael