Banner-style Animation with GreenSock-powered JavaScript

I have a really fun and stylish demo of banner-style javascript animation for you. The main player here is TimelineLite from GreenSock’s tangy Javascript port. I created this demo to try to prove to myself that:

  • banner animation outside of Flash is viable
  • the performance and precision of sequencing would not be barriers

Come inside to judge for yourself.

I don’t know about you, but I would have a tough time betting any money on whether or not that is Flash or JavaScript.

Although it may not be the most draw-dropping animation you have ever seen, I was able to very precisely stagger the sequence of animations exactly how I wanted them. Certain animations overlap with each other while others go in direct sequence.

Some of the beautiful benefits of tying all the animations into a TimelineLite are:

  • You don’t have to manually track and increment delay properties.
  • You can globally adjust the playback speed of the entire animation.
  • You can immediately jump to certain sections of the timeline. For instance if I want to fine-tune a transition at the end, I can just do timeline.seek(timeline.duration()-2) and skip over the intro every time I preview. I could also jump to a label timeline.seek("comment2")

Inherent Difficulties

Coming from a Flash perspective there are definitely drawbacks to using javascript. Most notably vectors, 3D rotation and the whole gamut of Flash filters (drop shadows, blurs, glows etc) don’t have the cross-browser and multi-device support necessary to serve to a wide audience. So from a creative standpoint you have to make some compromises.

I decided to hand-code all aspects of the banner above. The most grueling part is grabbing coordinates from photoshop and typing them into CSS. I imagine I will find a workflow that involves Dreamweaver, Edge and/or the new Flash CS6 HTML5 export features to streamline that a bit. Once the assets are positioned, the GreenSock side of things is a breeze.

Being that I’m just really trying to experiment with the raw guts of GSAP v12, I didn’t spend a lot of time optimizing. Emrah Atilkan has pointed me in the direction of Sizzle.js to use as a lightweight alternative to jQuery as a selector engine. And to go really lean and mean its pretty easy to target any element via getElementByID (thanks Matt). I plan on experimenting with a variety of methods and boiling this kind of work down to the bare bones.

All the text-blocks in the example above are images. In some ways using @font-face makes sense but not so sure the filesize is always going to work in its favor. Also, some browsers don’t handle moving and scaling text all that great.

Share your thoughts

I would be very interested in hearing from you guys what you think of javascript as being a viable alternative for banners in the near future. I always held the opinion that the publishers/networks would be very slow to adapt. From what I see most of the big guys are still serving up Flash 8/9 AS2, but my perspective is limited. I got some really valuable insight from Randall on how javascript animation is making some huge advances in the ad space.

If you have any insight on where this stuff is going, I’d love to hear. From what I can tell there is plenty you can do today to create engaging animation outside of Flash. Most importantly it gets you onto iOS (like it or not). Sure it isn’t as dead-simple as Flash but it is doable and the tooling is getting better.

What do you see as the barriers of javascript animation going mainstream?

What platforms are you using today that allow you to serve rich js ads to the masses?

Sound off in the comments.

Best,

Carl

ps. I’m really interested in seeing what has and can be done. If you have created any javascript-based banner animations, tweet them my way ( @snorklTV ) and I will be glad to pass them around.

Post to Twitter Post to Facebook

This entry was posted in GreenSock Tweening Platform Tips. Bookmark the permalink.
  • http://www.facebook.com/people/Marius-Posthumus/100001638378294 Marius Posthumus

    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!

  • Randall

    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.

  • Jason M

    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).

  • http://twitter.com/matthewfabb matthewfabb

    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.

  • Jerome

    “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?

    ;)

  • Doug

    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

  • http://www.snorkl.tv/ carl schooff

    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.

  • http://www.snorkl.tv/ carl schooff

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

  • http://www.snorkl.tv/ carl schooff

    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.

  • http://www.snorkl.tv/ carl schooff

    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. 

  • http://www.snorkl.tv/ carl schooff

    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.

  • Anonymous

    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)

  • http://www.snorkl.tv/ carl schooff

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

  • Niklas

    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

  • http://matthewlein.com Matthew Lein

    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/

  • http://www.snorkl.tv/ carl schooff

    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

  • Jack

    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)

  • BannerMonkey

    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.

  • Leighdowding

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

  • BannerMan UK

    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.

  • JB

    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.

  • Randall

    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’.

  • Randall

    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. 

  • http://hiepthanh.webchuyennghiep.net/ Thanhmabo

    thanks for sharing, nice

  • http://matthewlein.com Matthew Lein

    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.

  • Jack

     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.

  • http://matthewlein.com Matthew Lein

    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.

  • http://www.snorkl.tv/ carl schooff

    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

  • http://twitter.com/MerrickBrewer Merrick Brewer

    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

  • http://twitter.com/MerrickBrewer Merrick Brewer

    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

  • http://twitter.com/MerrickBrewer Merrick Brewer

    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

  • Jack

    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.

  • http://twitter.com/MerrickBrewer Merrick Brewer

    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!). 

  • Anonymous

    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 

  • Jack

     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!

  • http://www.snorkl.tv/ carl schooff

    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

  • http://twitter.com/digitaldavenyc Digital Dave

    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.

  • Elliot

    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

  • Mo Betta

    boring and not snappy as flash…

  • zen

    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

  • Michael Marian

    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

  • Thomas Thorstensson

    Downloadable zip please!

  • mrock

    looks good and is smooth but not as eye catching as Flash. Not that anyone really pays attention to banners, but the ones that do stand out will catch your eye from things that are just static on page. These html banners look so robotic and square, but whatevers!!! A shine or some type particle effect may make me look at a banner twice or at least glance at it. That’s just my thoughts…

blog comments powered by Disqus