Search the Community

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. See the Pen HTML5 Banners - blog post big by GreenSock (@GreenSock) on CodePen. The results are in...and there is clearly a lot of frustration and confusion out there regarding the urgent shift from Flash to HTML5 in banner ads. Thanks to everyone who participated in the survey. Your thoughtful and rather passionate feedback was immensely helpful. It informed our [rather epic] post summarizing where we're at and what's needed to move the industry forward. Read it now: Solutions for Banner Ads in the Post-Flash World. It contains some amazing news regarding GSAP (specifically TweenMax.min.js) being added to some very popular network CDNs. Here are the survey results: What is the single biggest problem you face when creating HTML5 banners? Honestly adding making it compatible to all networks. Specs differ. Also, translating flash effects to svg similar effects or complex text effects in required file sizes. .ss-text-answer-group{ height:500px; overflow-y:scroll; } .ss-text-answer-container { background-color:#fefefe; padding:16px; margin:4px; line-height:28px; border-radius:8px; } .content h2 { font-size:24px; margin:50px 0 10px 0; } Lack of information. Much of the documentation out there is still related to Flash! Probably where to begin, at all. I.e. specs and implementations. That the ad networks don't support them or require me to use their DUMB IDE. That most of the content providers in Norway do not allow GSAP. I think they are trying to limit over-animating stuff, which may affect sites on mobile devices. Guess this is something they have learned from using Flash. Nowadays you need to be more of a programmer than a flash animator. Single lines of code or timeline need much better javascript understanding to be executed. Designers need to consult programmers much more than they used to do with flash. Also for HTML5 banners there are no standards to follow. Each company builds their own standards and publish what they think the best, most often leading to not be suitable to the websites. Size, dealing with assets. The biggest problem I faced was GreenSock not being supported by DoubleClick, also they files cannot end with .min.js. That being said, banner sizes are also a problem. The company we work with is limiting the sizes to 120 KB. Between images and GreenSock we'll pass that. - initial file size of the html5 file -> polite preloader would be great feature. - component base building: this means one component for accessing DOM elements and changing their properties -> smaller then jquery - component that contains all kinds eventlisteners e.g. addEventlister(MouseEvent.Click, <function>) - possibility for own event listeners. - vertical alignment of text - font size -> should be possible to embed only certain characters from a font file. Rediculously badly written so-called "templates". Next single biggest problem: Media Agencies (that supply rediculous specs). I can't tell you how many HTML5 banners we've had to build that are supposed to use on(release){ _root.getURL() } stuff. They have no idea what they're doing. Either don;t supply a spec Getting file size specs. Not knowing the standards from one media company to the next. Also I have a hard time ensuring that absolutely EVERYTHING including fonts are loaded before the animation starts. File size. The lack of Standards Animating them, it takes a lot of time to do placement and work through the positioning and timing of the animations.Cross browser compatibility, specifications and file weight lol.Advanced 3D animations/transitions Finding publishers that will accept external markup, CSS, and JavaScript Cross browser compatibility. Webfonts, javascript and frameworks. I cant, and wont learn HTML 5. applying vendor code I would think responsiveness or deciding with canvas or CSS animations A number of things. At the forefront is • X platform comparability, 100k file size limits, & use of custom fonts. Responsiveness and height problems with objects not getting pushed down enough. Also, text staying within the boundaries of the box when responsive.The IAB hasn't released updated standards for banners, so most publishers continue to use previous Flash size limits, ie 35k - 40k. CLARIFICATION - FOR NEXT SET OF ANSWERS: These are answered based on HTML5 banners only. I use canvas & SVG for big sites, but haven't yet for banners because of the filesize limitations. Orchestrating frame-by-frame movements. I don't do it often, but when I need it, I need it. Payload size Lack of publisher standards Lack of specifications. The richmedia providers and publishers don't have specifications or some kink of dos and donts. The lack of an IDE similar to Flash. New tools are falling short (GWD, Edge, hand coding, Hype3, Adcade) The lack of a graphic wysiwyg editor like flash ide Filesize (overall), and the inconsistency between publishers / ad serversThat i don't know how to use GSAP inside Google Web Designer. None. I use greensock and it works great as is. Your tools are great. don't need code size to increase to automate things for newbies. lack of browser consistency. File size is a major issue for me right now when making ads for online campaigns. File size. I can't use GSAP so I had to make my own tweening engine. I used the same API as GSAP just in case I am able switch it out. I hope that's okay. I don't know yet how to get the easy workflow that I have with flash and gsap, without doing it all by hand. Cross browser compatibility the limitations. lack of support. Ad weigths and production time A big, fat question mark in terms of specs. Nobody can tell us what the specs are anymore, or whether they should or shouldn't include assets that are pulled in from a CDN. Knowing what authoring tools we are allowed to use. Most of the functionality we use in our banners, as well as platform considerations can stem from what authoring tool(s) we can use, and many of them are platform locked or not compatible with vendors we need to work with. Lack of a refined flash-like IDE for designers who previously did their animation on the flash timeline The difference in delivering banners, HTML / Google web designer / flash / gif / edge Misunderstandings with account, creative, and tech staff about what HTML5 banners are and how they are deployed. get full domain in the use of css3 rules, and the use of canvas I run into multiple issues when creating HTML5 banner ads. I guess for the biggest one with not enough information online is using custom web fonts to stay within brand standards. I still don't understand the rules/laws that comes with fonts especially when a single ad campaign can have multi million impressions. With that, the same brand produces a new campaign every month. The abhorrent nature of Banners in general. Lack of Visual IDE to speed devloplment, and Filesize size. Filesize the size of animations, all scripts included, should stay under 50ko. It should generate datas for tracking audiance and analytics in one animated and graphic datavisualisation system. I do need to include all social networking links. In a more complete version of a Banner solution, I'd like to control all API of social networking and video hosting systems (facebook, twiter, youtube, vimeo, dailymotion) inside my banner. Banner designers are no developers, so, you need to create your first software to build this with no coding. To keep all assests etc. in one file. Like the swf-file format... Lack of standards, education, file sizes, etc. The lack of visual tools to help the development of animations and specially "3D" effects. Usually creative professionals have less experience with coding and UI tools would help it a lot. No good design tool for animators. After doing banners and sites for a big advertising agency, for the last ten years, we need a good ide that will let animators design based on a visual time line. Usually what happens is all the devs get pulled on to websites and more advance stuff and the banners are left to designer/animator/light front end developers. Changes and production need to be fast. Coding banners makes it not a productive and usually ends up being to expensive way to do advanced banners. File size. filesize weight (especially if i need an animation framework) so I need to use pure CSS for animation It is not flash Text (@font-face vs pngs) & javascript libraries like Greensock. Getting ad servers to host these for free. Flashtalking/Sizmek will. Doubleclick will not always host your files on their CDN without counting against k-weight. Also, gZipped files do not count. But regular compressed files for Doubleclick DCM do. No sure about the other adservers right now. Designers not understanding the limitations of HTML5, in particular the fact that, since HTML5 is rendered by the browser, it does not look the same across all browsers and OS variants. Second, lack of standards in terms of minimum file size. Specs clarity (or lack of) The main problem comes for Standard Ads, not for RichMedia Ads. Creatives are used to work with Flash, and now, with html5, the weight of the Ads is going to be bigger, so this will be the hardest difficulty as Ad Specs are extremely strict, specially with the introduction of RTB and programmatic Ad campaigns A user interface for the banner creation. Generally all banners are created by coding css, javascript and html5. File size. Cross domain script loading. Performance especially mobile device Standards. Browser Compatibility. Portability. The ads don't package well and the size isn't optimized as well. finding where my last animation has happen. Size. Lack of timeline takes some of the animation creativity out of the game. I like using greensock mixed with a timeline to show amazing animations with the power of code. I was told that greensock is too heavy and some places are pushing css file size limitations Knowing what tools I will be able to use and if the file size will be too big, also if Google will have a very low bar and not allow GSAP and other tools (JQuery etc) to be used, so even if I build for one publisher using GSAP, will that banner be rejected by Google or we will have to build dumbed down content just for them. inserting-creating that clickTAG macros in a proper - working way File size limitations. Limited docs including specs. More solid guidelines for asset delivery. There are differences between the major ad servers and the only way to figure them out has been trial and error. The size, mostly is the biggest problem - no matter we're talking about image size or js/css code size. Always optimising the size... The filesize, especially if CDN is not allowed Time for development x2 in comparison to flash. No way to make effects such as stroke, glow, drop shadow. Web fonts are quite buggy IE's lack of good mask support, firefox kerning, figuring out if the ad server is going to count the weight of cdn files, such as TweenMax and google fonts, against our banner weight or not. (DoubleClick Studio - no, DoubleClick Media, yes, Sizmek, yes...) Increased Production (Hand coded animation) Increased QA (cross-browser) file size constraints Preroll often it is not allowed to use external libraries but only use css transitions File size Workflows are more diverse in html5 as there is no one single IDE that works for everyone and every platform. Flash did a good job of combining a timeline with code and took many iterations to get to where it is. Cross browser / device all looking and working the same Old assumptions around Flash banners...this happens at all ends: account people, creatives, project managers, ad networks, ad publishers. Everyone has engrained rules-of-thumb and ideas about banner production based on doing them in a pretty stable environment with Flash over the past 15 years. That's all changed. Doing HTML5 is the not same, the creative possibilities aren't quite as good, and the K-weights routinely come in at 2-3 times larger than Flash, nevermind introducing cross-browser/cross-platform issues. Outdated publisher specs is the most immediate issue. 40K doesn't apply to a HTML5 banner. IAB hasn't released new specs yet. It's a free-for-all. Ad networks and publishers are all over the place as far as specs. Many try to apply old Flash banner specs to HTML5, doesn't work. Others impose weird restrictions like limiting the banner to 10 files. Or allowing 3rd-partly libs that count as K-weight sometimes, but not in other cases, etc. We've also found that some publishers of a rich HTML5 unit doesn't resemble anything we would historically call rich--no animation, no story telling, just a chunk of HTML with some copy, links out to PDFs, a video tag, etc. Animation and design still matter.project size Nothing really. I love making banners with only 10 lines of TweenLite code. It's the best! Only thing i miss sometimes is a stage to click on. Especially when working with masks and gradients. (im not a fan working with Edge or GWD) Getting clear specs from different ad servers - e.g. filesize limits namely:does this include the external assets/apis/polite preloaders Low file size requirements are the biggest problem for us. Generally we have to hit a 100k file size spec. Consistent browser support. Use of filters (drop shadow) on transparent png/svg. Cross browser compatibility... Currently I use Flash as my layout program importing a single sprite sheet which will be used for the HTML5 banner. Assembling the images on stage to marry up to with jpgs as comps in guide layers allows me to see match the layout. Then I can animate away. I use Flash / Actionscript with TweenLite AS to develop my animation and then move my actionscript into a javascript file and use TweenLite JS. IN this way I am repurposing my actionscript as javascript. Of course getting the xy coordinates of my movieclips which contain a rectangular mask and a sprite sheet. is the challenge. I use Flash's Actionscript to HTML5 Canvas which produces a javascript file with all my coordinate information contained. The challenge here is to massage the javscript information into variables that I can paste into my HTML5 Javascript file. It's routine to me now and my trick is to have all movieclips each with the sprite contained with a rectangular mask. The movieclips are all placed at x:0 y:0 and the sprite and mask are repositioned to match the JPG layout images on guide layers. Proper Preloading respecting polite loading 40kb banners The ad delivery networks lack of standards and support and the out-dated filesize limits. Designers still designing with Flash in mind, not realising the limitations of HTML5. It's usually a problem that would require some kind of masking. Simply that we haven't figured out a workflow yet for HTML5 banners. Handling fragmentation and cross browser support. Dev Time is longer than with flash. Inconsistency of programing best practices leading to file bloat that pubs are unwilling to approve file sizes for. Best Practices surrounding JS methods. Make it accessible for designers to develop banner independent. No good tools such creative tools such as Flash interface available yet. Positioning Elements Positioning assets in the banner The ksize limits is a huge problem. Even if they accept higher specs, they forget this is all subjective on concept and on creative dimensions. Most websites still say 100k (40k initial, 60k polite) when it should be 150k initial, 2 megs polite. Lack of a good IDE. Edge is good but heavy, and GWD is not there yet, lost of crazy generated files. Doubleclick and adwords ads have to be done in Google Web Designer, I don't know where to place my GSAP tweens, what is the best practice. For other adservers I need to start from a Flash CC canvas export, again I don't know where to place my cdn calls and my GSAP tweens. A last option is to start from an edge template, and my problem is still the same, what is the best way to use GSAP with edge. Lack of specs from sites and publishers, and lack of understanding with project managers as to what questions need to be answered. Specs. We're given the same specs for HTML5 as for SWFs. When they are not the same. 40kb for files. Not true according to Google, hard to find answers for on other ad networks. Second biggest issue is tracking and getting an answer on how to properly setup clickTag tracking. And the last but not least is what authoring environment is accepted. Google wants us to use Google Web Designer(beta, and doesn't show in IE9), we'd prefer to use Adobe Edge Animate(buggy, but shows in IE9) 1. The lack of a unified specs across ad servers (i.e. DoubleClick, Pointroll, Sizmek, etc.) and publishers in terms of K size limit , CDN usage, etc. There is even a difference how ad servers count k size! Some include CDN js links into their k count, some don't. Each has its own set of rules and developers are often just confused. banner size, authoring tools, custom fonts Doing so much stuff manually * A Banner should mostly be created within an IDE because you've got a story to tell. Telling stories just with a codeview is pretty hard. Some can do it - most not. * Optimizing Process (currently done via grunt script) - Fonts, images, compression Having an advertising network which supports it. First of all, fileweight. Second a playback/play/pauze/speed up/speed down functionality to get more visual control over your animation. Smooth scaling/rendering of images/text. The use of fonts which adds a lot of fileweight and it tenders never the same in all the browsers. animation File sizes. Too often when I'm done breaking out creative assets, web fonts, and lining in SVGs to the units I am left with very little space. Too many publishers only accept ludicrously file sizes so I am left animating with no JS libraries and add CSS animation classes from timed functions. coding the banners to be responsive and weight of banners ridiculous file specifications. Some people still think we are in the web of 15 years ago. So 40Kb is still a common ksize request. Not realistic banner size. I recently was asked to convert flash ads to html5 with the same 40k max. Issues with the Ad Serving companies and their file size limitation and the size of the libraries for GSAP. We need a universal CDN approval so that the libraries don't interfere with the creative. Worked great with Flash and the possibility of only using 4kb but those days are over. amount of files and total filesize Developing to Double Click Studio standards, lack of modern documentation for HTML5, little to no consistent specifications. Making sure everything is loaded. I just filled this out but didn't put my email address. This time I will but the main trouble I've been having is getting web fonts loaded properly on IE10 and 11. Was hoping you could let me know if there's a fail proof way of loading everything before the my timeline lite starts. That publishers have not come forward with specs yet. Industry wide confusion. Lack of consistent specs and standards. k-size files size File size of the unit, and out of date specs determining them. Character animations for rich banners such as the Google Android banners. Blurs, masking etc KB Size cross browser inconsistencies + file size restrictions Speed. With the Flash IDE we can created banner very quickly Clients are still used to flash and can't handle either the new asset types nor the requirement for a bigger file size and external libraries. They still want 40 Kb I. E. the syntax not clear Nobody knows what specs to follow in regards to k weight. Google notified us that they will accept 150k as standard units now, replacing 40k flash units. However, many publishers are not accepting the 150k unit. It would help if the IAB was a little quicker. Also, a big issue is masking animations in html5. It's something I did daily in flash but is very difficult in html5. It would be great if all browsers could agree on a masking standard. Our designers want a timeline. I'm very familiar with Greensock for flash so I think it will be easy to adapt. But some tutorials would be great. Browser compatibility Lack of good tools to build with. responsiveness Different platforms with different specs and then only being able to point out problems after you've provided a finished banner (which you need to adapt) some platforms only support a few assets in a banner which will give you to use sprite sheet systems Surety on exactly what is required. file size smoothness of ads in comparison with Flash Web Fonts also, re-cutting graphics for every banner size File size.. keeping assets small and compact and efficient. consistent look I would say there are 2. 1. Feature parity across browsers. Many features of HTML5 are still not implemented properly, for example CSS masking not working in IE. So often the only way to support enough browsers is to use canvas based systems. 2. File size and outdated specs from publishers. We are still getting requests for 40K ads Finding a solution to allow our non-technical designers to create them as they have in Flash. As a designer/lead front end developer I would prefer to hand code with GSAP, but that wouldn't work for most designers. Had to settle on Google Web Designer as a solution for our agency. Masking Create small enough code (including images) for the small filesizes. The lack of one standardized spec to work against. At least back in the flash world we have the ubiquitous clickTag listener. All these companies are coming out with proprietary builders for HTML5 ads which in my opinion just make things worse. Remembering where my last animation was within this imaginary timeline. Big file size Custom fonts are not crossbrowser Adobe edge is completely buggy and not user friendly to work with. PNG optimalisation Lack of tools. Many publications are unclear if you can use anything besides Google Web Designer or Adobe Edge if at all. masking and brand fonts Performance (time to load, time to parse, executional speed), particularly on mobile Complexity...no IDE like Flash, multiple documents, code to edit (HTML, .js). File size. 100k is norm but with CSS support, doubleclick enabler, etc files can easily be 140-180k, which sometimes requires special permission from the publisher and requires polite load. Media agencies being able to supply specs before build There are no clear standards of specification sheets from many publishers / media agencies. They are not educated or prepared for the shift to HTML5. Consistency across platforms, and replaying the entire animation. File size is a huge problem too (pun intended). Getting publisher specifications that are relevant Browser inconsistencies even in up-to-date browsers. Keeping the overall filesize low. Meeting Specs, File Size lack of across the board specs from ad networks and vendors regarding html5 banners and the k weight when dealing with additional JS libraries. File size to include the runtime or GSAP, Sprite Sheets, and just general specs of the publishers What should GreenSock do to help solve the problem(s) you face when creating HTML5 ads? A cross browser masking solution. Custom build of framework that only includes functions that are explicitly required. Provide some templates and examples. It's surprisingly hard to find accurate info on provider specs, etc. Provide minimal banner-only GSAP JS library, perhaps. File size is a killer. I wish there was a Flash-like or GWD-like software UI for GSAP for non-devs. Deliver a tiny tween engine! Invent an alternative to masking (perhaps you have already and I am ignorant of it) A tool that helps easily calculate the file-size of the banner would be great. Maybe something that shows a tally of the k-weight of the Greensock assets we're using, at the very least Just maked all animation work in all browsers. Maybe present an additinal package (much like tweenNano) targeting HTML5-advertising, and being more specific towards content providers to let them know that this is not going to affect their site. I'd be happy to help bring such information to the largest news providers in my country. Don't know, but it would be great to have a platform like flash for all HTML animations. now its ( SGV / Javascript / CSS etc ) Make the library as small as possible. Keep doing what you're doing. Documentation is great. The TimeLineLite tutorial was great too. I never used it in FLash, but find it more valuable for HTML banners. Keep file size light. It would be nice to have a very small js, like TweenNano in flash. Designed for the use in Banners. With only the very basic of functionality. The Goal would be to keep the Ads under 80KB tweennano, modularized custom build (e.g. let me choose single ease equations) One code, works everywhere... Hi, I've been a huge fan of GS for years! CDN hosting is a great idea, but some kind of Timeline Nano product would help us replay the entire ad. I would love a GSAP video control too! Create an gsap authoring tool (better then Adobe Edge) Development tool similar to Flash, where you can combine frame-at-a-time animation with vector animation. Also allow things like path-following. Looks like they are the answer! Sample setup files would be helpful as an example as to which banner structures are likely to get accepted. - the current components should be even more customisable since they are still too general. THis would save file size for the js. - polit preloader container for initial deployment. - components for carousel, sliders - imagescaling e.g. exact fit, centering etc. Nothing. Working with all the major publishers and networks (Double Click, Sizmek, etc) to get GSAP accepted as a CDN download. With official guidelines to state that it does not count towards file size. Not having to ask the same question over and over to each individual publisher and network would save a lot of stress. It would be great if you could motivate Google/Doubleclick to integrate Greensock into Google Web Designer. Also to have them upload the Greensock library to their server so it won't count against the total file size of the zip. front-end development tool Dont know. I don't know any solution that can help me to animate under 50ko including 3D properties, svg, font animation. Educate designers about the limitations of HTML5. Propose standards for file size(s). not sure. Not applicable It should convert all the text to transparent .png characters, and replace the HTML text with these. But i know it isn't a Greensock task to do. More likely a function of a desktop IDE. Greensock should make a canvas IDE for making layouts and hide all the unnecessary programming/typing tasks. Could you guys provide an extremely simplified nano version for html5? Just to have simple tweens, no cross-browsing features (at least we don't have to deal with IE9 or lower now). Create more light/extremely optimized typical components like text scrolls, slides, etc. piece of software to actually make them, a builder that works way better than google, tumult hype, or that smithmicro software. I don't know if GSAP can help more than it does right now. Of course is the best animation library I have worked with, but right now we are in a "panic mode" trying to figure out what is the best approach on creating a banner. Custom templates, tutorials or do's and dont's could be of great help but this is more on the publishers side as the techniques they use for tracking are way different. What would be great for you guys and the rest of the developers creating ads; work closely with Google/Double Click to have the animation libraries and all your Greensock goodies on their servers or baked-in in some other way. Means we aren't requesting from your CDN every time. And also develop some specifications alongside Double Click (and other Ad Networks) to bring some consistency and understanding between us all. From the forums it seems like a knee-jerk approach currently, everyone coming up with their own way of doing things which will cause mass confusion as all Flash developers move over to HTML5. Best of luck with it all! ? Maybe have a page for clients especially for this topic. Then they'll be convinced "ah okay, this is the right way to do it" Be able to use Greensock (HTML5) in Flash the same way one could implement the GS AS3 code. Not sure. Create a plugin that allows us to publish files that will be usable across all networks? An app that let's us know if our ad is in compliance? If not, where does it fail? Nothing I can think of GSAP has made it possible for me. I was lucky to get a year long campaign with a polite load setup so filesize wasn't an issue and I can use TimelineMax, Jquery and retina quality images within that spec. I don't have a problem with writing i code to use greensock in html banners, but banners in flash used timeline because images and everything gets packages into to one nice file, so all you have to do is give somebody a .swf file at you're done. html isn't really good ad embedding, you can ofcourse include javascript and css in the html file but fonts and images still causes grief. Particularly since you can jpg compress a png images and so retain the alpha channel and so images takes up a lot more space than before. most companies have a file size limit on a banner around 50kb, include any font or js library and you're over the limit. A short how-to like this one, thatI've found http://greensock.com/forums-support-files/createJS-demo.mp4 would be very helpful. You already do a very good job...but minimising size and loading times will always be the priority with banners...increasingly I also get asked for mobile platform compatibility...I.e good performance on pages that already have a bunch of code...a lot of it not optician,owed for mobile to boot. roll me a joint? WYSWIG layout tool or similar Create an IDE Greensock should build an ide interface with a timeline for animators to be able to do what they do best. Animate. The hidden backend can be powered by greensock. There is a huge gab with banners not being able to use flash. The program ide flash, not just swf format. Adobe hasn't gotten the exporting to html5 down right yet so I think greensock could be the one to solve the problem. some sort of export function, that exports the tweening in a single css and js file with no external references Have talks with some of the big ad networks to develop a >standard<, easy-to-package advertising format. Push for Greensock CDN to be accepted as standard and not count towards file size. hahhahaa, good question? With the amount of variables it seems like an overwhelmingly daunting task. TweenNano js Love it as it is, other than the file size restriction. Do some joint effort with Google Double Click and then all the other Ad Serving companies will have to follow suit. Is there a way you could have a window loaded type function that would ensure everything gets loaded before animation begins? Make it more like Flash Performance especially mobile device help make sprite sheets to combat That's a hard one, maybe if they could set up a working 300x250 example that can be downloaded, including all header info, links to .js files, even a button with the click tag code included, so we/developers can get a good idea of how to set up the smallest file possible. One thing I find frustrating with code pen is that the header info is not visible in the HTML side. Perhaps adding some of the awesome filters like tint and blur (if that's even possible with HTML/CSS) TweenNano for HTML? Greensock is already helping my transition from Flash banners to HTML banners immensely! Thanks to TweenLite, animating HTML banners is no problem. Lean on the IAB to push for standards. And more specifically lobby to make GSAP a standard library and get penalized for using it against file size. Do the same thing you did when we all used Flash. Show examples of how to use greensock with at least one of the animation tools out there. Showing how to use greensock with codepen is pretty useless for me. I think that we should team up with the IAB to define one main spec for everyone to work against. Make pulling the code from a CDN a standard and allow it not to be considered part of the overall file size. There needs to be a discussion of how to handle fonts as well. Either increased file size allotment for fonts or CDN allowance. We had some SSL issues the other day, that needs clarification. Backwards browser compatibility get GSAP to be available as a CDN link rather than having to be included in the ad source. TweenNano for GSAP 70-100kb is too big for an animation library. We made our own as a quick fix. https://github.com/Super-natural/superTween Have a banner ad FAQ page that has links to major ad server site specs. the timeline is wonderful for scenarisation of animations Just keep doing what you're doing. Creating animations standard That you can modify as you nerf. We could actually use a JS equivalent of LoaderMax! That way we would never ever have to fall back to easeljs' LoadQueue. (Your AS3 videoloader was ridiculously good. A JS equivalent would be awesome) How about building a cross-iframe comms tunnel so building synced ads would be a breeze? :) You have Tweenmax and Tweenlite but what you don't have that Flash did is TweenNano. I've seen (worse) tweeners that were only 6kb. Something closer to this would be fantastic. sizmek have an arrangement with all publishers to exclude gasp libraries from the file sizes, using versions hosted on Sizmek servers. A similar agreement with DoubleClick would be useful. We had once talked internally about building a visual timeline tool similar to Flash that used Green sock, and giving it out for free with your blessing. Most interactive animators I know would cry with joy if you made that program/tool. At first it's all about simple animations (slide in, fade in etc) and same time keeping the kbytes low. SVG is a big thing considering how much vectors were used in flash banners. But sadly SVG is not as smart as Flash what comes to compressing vectors. So SVG usability compared to Flash is one big challenge. I think you are helping incredibly. I have only recently switched over from flash and my past with greensock has meant the shift was very easy. I would have liked to much earlier but demand for flash meant it wasn't possible within my agency. Offer a better tool / user interface for banner creation Lightweight library develop a super minimal, move here-move there, fade-in fade-out and timer functionality, that is less than 10kb Even the TweenLite plus the Easing pack (the most minimal setup as per my understanding) are around 31KB minified. If a banner is around 40-to 80KB this eats a lot of it's size. If GSAP can be optimized even more for banners (e.g. like a separate, smaller library) this shall be great. I think the size is the most crucial issue here. A 'nano' version of Timeline working with Tweenlite create a greesock "masker" plugin I'd love a FAQ dealing with the most asked questions. provide sample code or more tutorial (preferable video format) for every single API First your work is already a big help. A flash like GUI to build banners would be Nice. I don't know with respect to the above - I think there needs to be clear standards across the industry Perhaps GreenSock could have a smaller simplified version just for banners. Personally I've found TimelineMax to be the perfect option for animated banners so if that could be extracted into a library only for banners and adjusted to work with DoubleClick then we'd live in a perfect world. -Help get better banner specs established. We've internally settled on 100KB for a standard unit, not including 3rd-party JS libs -Make working with sprite sheets easy. DoubleClick has a 10-file limit for an HTML5 banner, necessitating sprite sheets for many projects -Get integrated into Flash. Our most viable option right now is the Flash Canvas workflow, which uses CreateJS. Mostly because designers can animate using a familiar Flash workflow. Everyone wants to use GSAP instead of CreateJS's tweening engine, but we can't do both. And just using GSAP means we lose timeline animations. -Get official support from Ad Networks so that we can use GSAP without penalty to K-weights Perhaps provide an online animation interface, sort of like you had for flash, the explorer I think you called it. It't helping a lot already. Well providing TweenLite AS and TweenLite JS allows me to repurpose my actionscript as javascript. That's huge!! Getting the coordinates of mask and sprite sheet positioning is the challenge. I use Flash's HTML5 Canvas conversion to get that data in raw form. I then massage it into meaningful variables as I have to forego the Canvas elements as banners servers and publishers don't want to use the Canvas at this time. Tutorials and working Examples would be nice, like the old Snorkl.tv stuff....or even CodePen based....complete working banner ads. * Simple but powerfull IDE * Support optimizing process Create a simple template/tutorial for each: - Google Web Designer - Adobe EDGE - Flash CC Canvas export user friendly tools Talk to google adwords and other large ad networks. work with ad networks and servers to develop an industry standard that does not rely on a specific content creation platform (like google web designer) Nothing really. Maybe make a special lightweight TweenBanner.js or something that contains the basic animations and TimelineLite. But maybe that's overkill and unnessecary. Simply that we haven't figured out a workflow yet for HTML5 banners. Keep up the good work! You've made these possible! I think doing what you are doing is working! Keep improving technology to make GS a standard library. 1. Create a tweenNano version of GsaP for HTML5 animation specifically for banner usage. A flexible library where you can disable functions like lets say you just want to use x and y position tweens and disable scaling or rotation related functions among other things since you won't need them for that particular banner. Create a tweennano for html. a playback/play/pauze/speed up/speed down functionality. Check whatever you can do for smoother Animation and the usage of fonts. Easily intergratably technologies and avoid elements not broadly and consistently supported. Clients expect ads to work consistently regardless of the technology used and struggle when things look different in the wild from what we provide as preview links. Not much GreenSock can do about it. More tutorials on svgs from 0 to expert. 3d transforms etc. More corporate style tutorials, buttons with masked glints effects, more text animations with corporate feeling. http://www.bannertouch.com/flash/allied/ (Check text effect on box left) Stuff that components like flasheff2 used to do for text and images. Help with those things that are easy with a wysiwyg editor, like set pivot poínters easy, setting masks, complex masks, and to have many deep dimensions as with movieclips in flash. Make your libraries as small and lightweight as possible. Provide more documentation for using TweenLite with canvas (I had a hard time figuring out how to tween alpha with canvas). Perhaps make GSAP even more modular. It's tough, it's pretty great already. It would be great to have GSAP not included in the overall file weight and be seen as the industry standard for animation in the browser. Push for standards and, importantly, for CDN delivered JS files not to be included in the overall file-size restrictions per banner. size A unified development platform that bridged all the disparate rich media and ad serving platforms running on greensock and universal standardization of specs for ads. Improved workflow in Edge Animate (more of an Adobe issue). make an HTML5 TweenLite version with a max filesize of 4~7 kb for banners with a max size of 40/50kb Build a banner making platform! Yay! Or perhaps a custom export from Flash? You already have helped solve the problem- TimelineLite is the best tool for animating html5 banners! The other invaluable tool in my quiver is my favorite png compressor: pngyu, coupled with ImageOptim. Without these png compresses, there's no way I'd be able to get close to the file size spec limits. Document samples that will pass the Rich Media Vendors specs and QA. the above - Your CDN should be robust and stable as millions of requests will be launched to load your library. - Preloads are also important, specially for RichMedia Ads. - Also, for Mobile Ads, you should have a "mini" library to load as many resources as possible. - Any help you can give to creative teams is good. Take into account that they have to implement also different technologies for AdServing (clickTag, tracking, etc) Tweennano library which just covers the absolute basics - element selections, fades, rotates, css transforms. get everyone on the same page and push advertisers for more kb I think GreenSock has done an excellent job with the code. Problem is that I haven't used GreenSock for banners. Will try to do more banner making with GreenSock Is there support for making canvas easier? Haven't looked at new SVG support yet but I find outputting image files for things like flat colored blocks faster, easier than writing code, but could increase k size. Does GSAP integrate with Adobe Edge? I don't know It helps with creating solid cross browser animations. Greensock is pretty awesome, so just keep being awesome! create templates It would be great to have a TweenNano that would allow a very small footprint. One of the biggest differences between Flash & HTML is that Flash includes masked layers and animatable vectors. I can export from Flash an animated vector however it packages a CreateJS which makes a simple animated vector over 50k at the very least. One publisher gave me 100k as my limit, but I just did a ton of banners where the limit was only 35k. Latch into Flash CC 2015 so it can automatically use your library as part of the Create JS framework. I've found that we recently push the latest 2 version releases for browsers, so using flash to html canvas works perfect everytime. Host on a CDN that does not use cookies on script calls. Cloudflare sets cookies which raises flags with publishers luke Google Display Network. Further lighten JS libraries... Does TweenNano exist for JS? provide stable glow, stroke, drop shadow effects and a way to animate it A design environment/toolset instead of coding I'm not sure at the moment, but since HTML5 ads are fairly new, there isn't a whole lot of sources available to answer common problems. You guys need to create a new version just for banners, that has the power of timeline light, tweenlite, ease pack, and css pack combined but lower in ksize. Or fight to get into a cdn and have the traffic networks not account for it as part of the specs for each banner. Also an IDE that is solely green sock is a big opportunity. You guys have the best animation engine out there. There is currently no good way to graphically animate. GWD is not there yet, and Celtra is too expensive. Lots of people are looking up to you guys to figure out the way out of this mess. Also we need a better image and code compression tools that are simple and drag and drop. Also i would love to use the loader manager that you guys create for flash to be use to load css, js, video, etc etc. Since we are all making a bit of a transition it's a bit tough to pinpoint. Even recommended file set ups for banners created from scratch would be a great starting point. For animation, I feel its already doing this. Things like masking, filters, and shader support would be ideal if it were supported. I think integrating in some way with a tool already developed for this end would be a great solution. I've seen some tutorials to use Edge with Greensock and seen some projects like TweenUI and Animachine but none are production ready or a "steady" solution, actually a workaround. I don't know if there is much you can do about the first but for the second I think creating a tweennano level engine would help, or perhaps allowing people to sub select only the parts of the CSS plugin they want to use. All the way down to selecting individual CSS properties that would be tweenable and generate a custom build. More pie in the sky, remaking your liquid stage system in JS and creating a full timeline based animation IDE would be big helps. be as always, an awesome option, maybe more turorial, or examples in codepen Preloading, more canvas related features, effects. Maybe some replacement for CreateJs. Compressing, maybe packaging? Compile the whole thing in one big file like swiffy does (but smarter ;-)? Size and portability Crossbrowser animation - one file format. Possibly get greensock to a lower k-weight. I know might be really hard. Maybe there would be trade-offs. Maybe reducing the weight of the GSAP libraries Like a company I doubt you should-could do anything abouy it, since this part of the job- in my opinion- isn’t your area and your part of the job at all (!!!) but as a "FOR BREAKFAST EATING"AS2-AS3-JS-HTML4-5,CSS-CSS3, GSAP(sry if I’m missing smtng)-working professionals with HARDCORE experience in programming different languages you could send me an IM or e-mail to nkoncar@gmail.com or simply make a thread about that (explanation with example) and doing that making me litterally your slave, saving my life and job….oh guys wrong place for crying, but I am…crying out loud Have components ready, such as youtube, video, social icons, etc that can be redesigned so I can concentrate more on the flow of the animations and how it feels. A tutorial on how to use GSAP on GWD. Break apart your twenlite tween max etc into smaller js's so that I can use only what i need to use and not all of the eases, all of the lite, max functionality. Just what i need. a lot just like tweenNano Develop a "Tween Nano" class that is upgradeable with external JS for animation an so on. This will be a difficult fast because e.g. Google will probably try to promote their own products on the doubleclick platform, but a standardized asset manager with solid svg support would be nice. Maybe integrate production tools like texturepacker a more robust debugging system effect make a TweenTiny fdfd Doing a version of GSAP that's less than 3k minified and gzipped. A good go-to tutorial would be good, or a template. Find ways to reduce the amount of code you need to write. it would be nice to have a tool with drag and drop, play, stop, reverse play, and timeline scrubbing functionality Not sure What do you think about the current HTML5 desktop animation tools? Most of them are ok for creating websites or big animations, but none are well suited towards ad production. Everything has to be so tight for banner ads, you can't have any garbage code. Flash 4! A good IDE for visually laying-out elements is lacking and the code they all produce is bloated. The lack of a wysiwyg graphic interfaces like flash. GWD is maybe the best, but is not yet a solid tool. Still very basic Adds a lot of bloat to the code. A set standard for HTML5 code. Once you're used to use GSAP timeline isn't a real must anymore but wysiwyg placement of elements is crucial. Edge is way to heavy and slow to use, flash canvas can't be used in doubleclick, GoogleWD is lighter, lacks maybe some webfont options or spritesheet generation but feels the best option now. I think that nobody was really ready for this rapid of a change so everybody is scrambling to try to come up with something that might work. I think the best overall HTML Banner Creator right now is Google Web Designer, however it has a lot of shortcomings and bugs that doesn't make it an ideal development environment. They suck. I use Adobe Brackets because it is stripped down with no frills -but still not perfect. It has some plugins to use but I can control the code line by line. I use to use DreamWeaver but found it would add all sorts of junk in my code. Somehow, built in It would be nice to easily work on PHP projects. None of these tools do a good job of that, especially when working on packaged projects like Wordpress or Opencart. Flash is the only one that actually "works" and it's got tons of better offerings then the other 2 major ones. The only advantage GWD has is the Enabler component integration and Maps, other than that, you can use Flash to still output the HTML and then have GWD layout the Enabler component framework for you to load the ad into lol. Adobe Edge Animate is just a waste of time if you already know flash and understand and use all the new features which a lot are better than Edge. Usability is very bad. A handy tool at the moment is Adobe Edge. But its definitely not the best The problem in most cases, is that we prefer to have proper control over the output. Edge output is bloated. But, the tool is also pretty powerful. There are some animations that can only be properly created in Edge. Exporting spritsheet animations to Edge is also handy. Edge js API is kind of vague. Google Webdesigner is so-so. It always uses 3D transforms (not broadly supported) and it doesn't cleanup well after itself (unused/removed keyframe animation definitions remain in the code!). It's also devious to add custom javascript code. Sublime Text is a clear winner, as it codes rediculously fast. We have built our own workflow (that utilizes GSAP!) and buildscripts to create banners fast. They add too bloat to file size, I generally end up making all my units in PHP Storm so I can control the file size. I'd also like something which generates web fonts on the fly and isolates only the characters I use in the creative to keep file sizes down. Right now I currently do this in Font Forge which just feels antiquated. Editable code post-compile. Google Web Developer gives most readable output. Edge is best IDE with most options updatability. I'm not impressed with any of the tools from a file size stand point. They're all great for animation, but then mountains of code are generated. The must haves are code optimization and masking. not applicable Edge Animate is not a full product (many bugs, poor properties), but it's known by every agencies. So, I need to use it. Hype seems to be a better solution, but no one knows it. I need a solution that propose a French interface. I use Sublime Text + a grunt workflow. They are far not finished, and they can't handle the font problem. Edge Animate is not able to export canvas based ads. Flash can't use system fonts like before with .swf format. I don't use any. I prefer writing out the TimelineMax code; however if GreenSock supported their own animation tool I'd be more inclined to use it. I think that they are getting better but GreenSock has the edge. It's just weight that I'm mostly concerned with Visualization windows They are too simple and hard to control and make update. They create more problems than going from scratch and are confusing, Edge is cool and fast but heavy on the export. We need something that car work with a regular website setup. SVG integration when editing complex elements with groups are not too good. Usually i code my animations but i prefer Adoge Edge I find them all to be awful (Flash is still winning, but createJS is ~35k). I am the director of a motion department for interactive animators. We have all kinds of animators, even some traditional. Flash/Canvas is currently the only tool that allows them to use their skill set completely. We have all learned handcoding because of the lack of good animation tools. Masking is a must have (and a larger issue). Complex nesting is a must have. A true timeline is a must have (not sequencing). Fine controls are a must have (frame by frame). All export is too bulky, multiple formats are very time consuming to setup. I must say using flash with js export is exciting but... Because of the file size unusable for doubleclick I try to avoid them all. i think google is wonky and hard to work with and the speed of the app sucks. edge animate is great, easy to use and uses commonly understood paradigms. the issue is the additional js library it makes you use. animation IDE tool easiest way to focus on visual art than the code Nearly good enough. Animating svgs like outlines and easily separating vector parts They are bad awful. Hand coding only. As a Flash Professional user, I have switched to Google Web Designer as I am making banners for DCM Studio. I have checked Adobe Edge Animate and Flash for such purpose, but Google Web Designer is very well thought off and it is easy to use it for banner creation or HTML5 animations. It has all basic tools, and while it's not perfect it is quite a good tool. Simple and effective, this is the key. Adobe Edge animate or Flash are not bad at all, just they have too much unnecessary tools and in addition these are not too easy to use with DoubleClick an example. Good banner tool shall offer compatible versions for all of the Publisher Platforms. Optimizing output in a way you can still edit file size is too big Lacking, I need to find a good tool for this that works with green sock. I think that is my biggest problem, just seeing the question above, I now have to check out Google Web Designer, as my company has not upgraded to Adobe CC for Edge Animate and Flash. I like hype more, but my workplace for example has pc's. Hype only works on mac's, so I use Edge. I use adobe edge a lot, it is a good interactive webtool, but it support for responsive design is not great... looking for improvement for that no one is flexible, so no winners except notepad for now They are subpar to what Flash is. Working for large agencies with high deliverables and tight deadlines the shift has really been to scripting animation over the years. Moving to javascript animation has been smooth using greensock. I've tried working with GWD and Edge- too bulky and slow. If Adobe can somehow make Flash output small / readable HTML5 that would be ideal for a lot of people. It probably needs to be rebuilt from the ground up or it would have been done already though. Stability. Edge corrupts animations easily. Google Web Designer lacks advanced animation and doesn't play at all in older browsers. I've tried using GWD but couldn't get the hang of it. I use GSAP for all my animation, so the only benefit I see with these tools is being able to quickly layout my DOM elements. When using GSAP alone, I have to plot my X and Y values manually, which can become tedious after a while. I did look into Adobe Edge very briefly and found it more user friendly than GWD, however the extra overhead of the edge runtime added unnecessary file size to my ads. I also find my markup becomes bloated and polluted with confusing id's and class names. I have much more control over my html markup when I don't use these tools and can structure my html more cleanly. I prefer to use GSAP as I know it will work across multiple browsers. Using an IDE alone to animate my elements is just too risky at this stage as I'm not sure what browser issues I might face when something breaks or doesn't work. With the extra time it takes to create banners in html5 these days I just can't afford this time to find a fix. I think perhaps over time these tools will improve, or maybe I just need to spend more time using them. Non-rectangular masks, animated masks, robust timeline control and tools (except Flash IDE), control over animation platform in the case of using an IDE. it has come a long way, if only there was a blending tool option. otherwise it's doing great. They are all deficient in different ways. Google Web Developer is janky to use and when I used it, it only supported chrome. There are other tools but they're not so flexible and cost a lot of money. I'll hand code these and get all the power, flexibility, file size, and compatibility I need for now. Tools need: -Compatibility across modern browsers -An IDE that generates ads in small file sizes GWD is the closest thing I've seen to a potential industry standard but still lacks quite a bit. Pros: - Intuitive Interface - 3D support (designer friendly) - No preview of file size when authoring - Scripting should be two screen from the state - more... Cons: - UX - Preview on multiple browsers/devices (Hype does this) - Owned by a single network, browser vendor, and company - Can we build API's and templates into it for our own specific needs? - No ties to webfont foundries Awesome! SVG draw plugin is buggy on IE10 At the moment, for our workflow, Edge is the winner simply because it is the most polished, and integrates well with the rest of the Adobe Suite which is widely used throughout our agency. I feel that EA and GWD are OK, but I have been trying to learn the code by hand so I know whats going on, thats where I think GSAP is really good in helping with the animation! they are ok, but only for rich media. Because most campaign also have a lot of 40kb/50kb versions next to the RM versions and they do share some animation/timing/assets. It's better to skip them and make all banners with pure code. Edge for instance is not transparent enough to extract a 40kb version and therefor useless selector, and animate. this is what we need Edge itself is running too slow on my hi - end machine (it's an Adobe bug), so I can't use it at all. Flash now can export to HTML5 but it's creating files that are too big. The ability to do masking the same as you could in Flash seems to be missing from HTML5 tools. I don't use them much. I'm more of a programmer, so if I don't have frame-by-frame tools, I'll just make do with coding. They all include a runtime, and GWD is so so so terribly hard to timeline animate that I would rather just hand code things with greensock. Easy conversion of flash animation to greensck code. A timeline in your inspector, which Chrome has now but it doesn't work fully yet. I find them very basic and clunky. I don't like any of those tool. Best ist to Code by hand. I like the flashtalking API since it comes with eventlisteners and also functionnaming that ist close to the actionscript 3 standard. Also GSAP is great. Best think is TimelineMax. Thought it would be nice to use TimelineLite and having some features available like repeatDelay all eventlistners etc to load if necessary. Important is also feed loading, fonts, preloading. Best feature would be polite loading component, that is lightweight. Yet to investigate fully The only one that isn't clunky is flash. But most places don't like it. Also flash canvas has no video integration outside of code. Edge handles video very well but the interface is not as smooth as flash Support (from Adobe's end) for Edge Animate is waning. Google Web Designer is still in Beta. Flash Pro only exports to canvas. Raw coding has been better for me and my team, as it doesn't rely on an IDE- when passing the files around we don't have to worry about everyone having the same software. Do to the Canvas not being useful for banners, and that Adobe Edge Animate is not often accepted, Flash is my familiar IDE using TweenLite. I still have to produce Flash banners and so I use a workflow that accommodates both. They lack proper masking, motion guides, blending modes, etc that Flash used to provide out of the box. Specifically with GSAP. Love it! Intergrated and geeked out back in the day with Flash while working in Advertising. Now the intergrating with HTML5 is simple and predictive. Love. Recommending constantly. To much garbage code added... Don't want to get stuck with one at this point so I built my own. Clean and totally integrated GSAP with Edge Animate or another simple visual timeline editor that uses GSAP as the engine. Maybe use Edge to place elements on the stage, and some motion, and use GSAP within EDGE to do the amazing animation, timeline stuff Tools today arent very designer friendly in contrast to flash, especially when the ad has to be packaged and delivered to the media agency and various services requires ekstra html and javascript coding skills just to add a clicktag. I am moving away from all kinds of animations For an animator who is dont want to learn HTML5, there is not much out there. Generally the code created by these platforms is bloated and messy at best. Hype seems to have the leanest code, and the IDE is acceptable to use, similar to Flash. But none of these are really usable for web banners IMHO due to the file size limitations. Very limited capabilities. More that a bit of sliding and scaling is not really posible. Edge - has a good IDE, but the run-times are too big. Flash - is the best all-rounder, but Adobe has all but abandoned it, so new features aren't happening really. The dev team is very small. Google Web Designer - sucks. Heavily pushed by Google/DoubleClick, but so rudimentary, it's laughable. Hype - slightly better than GWD. Flash -> Swiffy - works okay sometimes. Large files, uneditable source. Google is secretive about it's development/progress. Hand-code Canvas or SVG/DOM- flexible, but highest skillset requirement, long production times, and annoying DOM limitations (e.g. non-rectangular masking) Edge and GWD are terrible. In them, editing complex, key-frame animations is at best a total pain, or more often impossible. If, for whatever reason (time, budget, complexity, cross-browser compatibility, etc.), I can't build an ad from scratch using HTML/CSS/JS, I'll animate in Flash and output with Google Swiffy...but this fall back is a last resort. The robustness of the Flash timeline tools hasn't nearly been replicated in any HTML5 IDE that I've tried. None are as good as flash. They need to have powerful text editing tools and live preview. Awesome. Supported in all browsers. https://www.animatron.com. None so far. There is no good ones. I think the industry is having a hard time switching from flash because there is no good substitute. We tapes got replaced by cd's, no one had to call for an end to tapes. People just switched cause CD's were better. I think flash is having a hard time dying because so far I have not experienced a better tool for prototyping and building get experiences. I use flash for timeline and animation and use greensock for dynamic animation that is better suited in code. The combination of both is what is so great about flash. I can't really stand those tools. They haven't really been able to fix my problems. In my opinion they are still way way behind the flash tool chain. They are garbage. Too much disparity between authoring environment and production environment Many tools are too difficult for pure designers. Me as developer, the tools are just an obstacle and do not give me freedom but for designer, the tools do require too much html understanding. Not good enough. It would be great to be able to see your GSAP-animation within the tool of choice-... Good. But Flash Professional is the best one for me. There is no clear winner. They all have benefits, but none has the ability to create very slim code. Adobe Edge is the worst. If your client/publisher doesn't allow third party hosting, you have to upload the Adobes JS Libraries. And they are HUGE. Edge could be great, but lacks the control and finesse you have with Flash. They all lack cross publisher support or, in the case of web designer, is not easy to use. EDGE ANIMATE seems best - but it's commercial, not open source Advanced masking, testing features (loading and animation speed, interaction, cross browser quality, security, etc.) I think they create bloated code which adds unnecessary weight to the banners. It is far easier to make a lightweight, handcoded framework utilising the Enabler API and the different GSAP libraries as needed Edge is robust and versatile. Google Web Designer is poor beta with templates that don't pass QA. Flash somewhere in the middle but we don't use it for HTML5. Code based solutions are not an option as most of our team are visual designers with some code skills and we need to produce ads to very tight deadlines. There is no clear winner imho. You need to know all the tools and use the one that is more suitable to your needs. Unfortunately they are useless for standard units under 40Kb. They are fine for RM units that can accept bigger loads. However most of the tools are not created to be used in such a small creatives? with the 40k restriction. Very poor. Timing scripts for animations would be good. Standard way of componentising animations would also be good. Check out BannerFlow. I like what they're doing. It is exactly what I need as a production Tool. Flash is too complicated not efficient enough. I'll have to look into the others more carefully. Dont like them. They always need more code and scripts to make a simpel animation. The best of those three is still Flash because its more developed the last years. GWD crashes all the time on mac. I see video as the best solution for media on the web. I haven't really used any animation tools for HTML5. I have been using shift.js as a tween engine Most are in an incredible sorry state. They don't have real timelines, don't account for browser based issues, most don't work in IE10, They don't allow easy integration of custom code. The only one we have found useful is using the createJS output from flash since we can integrate it into our regular workflow. Have not been using these to make HTML5 animation. - Sizmek - Don´t like - Google Web Designer - It´s ok, but with some libraries it crashes - TumultHype - Works ok, only for IOS - Adobe Edge - Works ok but looks as first Flash versions or After - Effects. also it is closed and creates its code - Flash CC Canvas - It fails when you want to do complicated things (3d, Blur filters, masking, etc) - Google Swiffy: Works really well, but weights a lot and increases CPU - Sparkflow: Really nice but not too many penetration - Celtra: Just centered for mobile Animation library. Mostly things that can be dragged, dropped, and tweaked. It needs to be quick so yiu can get your point across without having to dale with so much code cause you start to loose the rythym of a 15 sec animation. Maybe a plug in such as implementing ease.js chart as a plug-in for notpad++ or sublime. Hand coding is still by far the fastest, especially when using GSAP. Flash seems to package any export with CreateJS. I'm looking for a way to export simple vector animations without additional bloat, for instance if a Flash vector animation is 20k if exported as SWF, it would be amazing to get a basic js file that is 20k that I can load in and control as an asset, not the full banner. Having used both Google Web Designer and Adobe Edge, I still prefer Flash. Neither of the other tools feels as polished or as friendly as the flash ads I use to create. Adobe Edge animate: - Exports a standard Js library (Edge Includes) of 100Kb... Google Web Designer: - Beta, clunky but with potential, good for BASIC animations and banners. - Works really well with Double Click. - Templates are cool. If Google Web Designer had an update, included some features common to Adobe products like Edge, added copy and paste!, and had some inclusion on GSAP we'd be onto a winner. I'm not a fan of any of them. Seems each has it's issues and when opening up banners that are made in one of these I want to pull my hair out. With GSAP, there's not much reason to rely on an IDE. they seem pretty fledgling..and limited for the most part, I think everyone still trying to figure out how to bring flash movement to HTML in a way that the millions of FLASH devs out there will latch on to. Its the wild west in terms of whos going to come up with that killer app! adobe edge is highly visual and reminds me of flash in a lot of ways.. BUT they tend of push the timeline features when I am comfortable with as3..it feels like a step backwards for me in this regard. that being said, it is versatile enough to allow greensock and code based movement also. This is what I tend to used quite frequently. the output is also pretty "clean" (readable) when you revisit it at a later date. Slowly, very slowly, getting there. Must haves: Serious coding level, flawlessly integrated in visual layer. Easy & customizeable library integration They are not predictable, they build with bloated numbers of files. We've looked at some tools which require a purchase of a media buy as well---which is not possible in our case. I have a lot of different formats to create. So my workflow to achieve that in short time is to create the banners in PS, export the layers by hand Import them to flash and write a gsap as3 script to do simple animations. I would love to have this kind of workflow for flash banners too. But I have no idea yet, if that exists already. We aren't allowed to use these tool due file size, we still have some 40k html5 banners and the exports from desktop tools are going above it. They are all lacking. Flash Pro has a tonne of features, but not all of them work correctly when you export into the various ways into HTML5. We avoid these tools because they output bloated code and publishers still want 40k ads. Currently, i think these tools aren´t ready for HTML5 animation. do not use very often Most ad serving companies require a .zip of all the assets for a banner ad. It would be great if there was a button that would collect and zip everything up for us. There has not been one that is an easy entry for designers: every tool wants to be everything for everybody. They don't work as well as flash they are all crap, it shouldnt try to hide or obfuscate any code I hard-code with SublimeText, but TweenLite/TimelineLite is hands-down my best tool for animating banners. I wouldn't have had nearly as easy a transition, or gotten the results I needed, without it. THANK YOU!!! I love GSAP from the little bit I have used it. But as for the desktop animation tools I have yet to go beyond Flash since the adoption rate of certain CSS/JS properties is lagging. Consistency issues, etc. edit code , dismiss all unnecessary code. I think google web designer isn't ready for public use. It's buggy and the developer/code view is less effective than Notepad, of all things. It's not even a real program, it's an alpha app that doesn't use the OS' native chrome or UI. Edge has masking which is fantastic, and I haven't used Flash to build HTML. However, all these tools have timeline animation. If there were some miraculous way to incorporate Greensock into the timeline - say, set up a greensock tween with all the properties and fantastic easing - and see that translated into cue points on the timeline, that would be amazing. It would bridge a gap between people who know JS and HTML and those who are more interested in design than code. n/a forget about IDE's and let Flash Designer die. Learn how to code or get another job Edge Animate is currently best - but development of Edge has slowed down (last update has only one feature added!), and there is a good moment to beat Adobe in this field. Love them, they're great! They aren't as effective as Flash but any stretch of the imagination. All of them everytime are trying to make the most easy way to work with their softwares. I'm working with Adobe (Flash, etc) for many years, and I feel confortable working with them, is my clear winner. I love Edge Animate for general animation. they write horrible bloated code. Haven't tried any! I find Dreamweaver easy to work by going back and forth with referenced documents (.js files) but setting things like coordinates is a painful manual process! Most are missing at least one feature. Google web designer has terrible support for webfonts. None are great at shapes and masking. See my answer above. When Greensock came out, I stopped using the timeline entirely, except for setting up the elements on the stage. I just use code to move everything around. All the current desktop tools seem to me like crappy versions of flash, that produce some wack looking code. As a developer first and a designer second, I distrust all WYSIWYG editors of all kinds. poop Ok. Transparant video support. This is the one thing missing to completely replace flash Faantastic, just huge on filesize. I can only use them if my filesize permits. Otherwise the best out there. I've been using GSAP for the last 10 years. Not a fan. I like to work within custom js/class framworks within sublime text I mentioned everything above. Web Designer & Edge are so primitive and limited, I feel like it's fast just to hand code and use GSAP. Flash's HTML5 canvas is nice, but CreateJS adds so much weight. I don't care for timeline editors. I want to TimelineLite everything. Edge is best but bloated file sizes. I think they are great. Edge looked promising but it looks like development stopped. Also didn't have GreenSock on board Google web designsigner timeline interface doesn't work nicely. Flash exports to big files. Biggest problem is when customize your banner outside the tools a d then going back to te tool to chance for example a text. Usually fxxxs up your custom code. They are not as robust as flash. I prefer to handcode my files. I have some coworkers that use GWD, but it takes to long to make revs. Google Web Designer is good for very easy banners. For banners with complex animations we've had much success with animating in flash cc and exporting to canvas. Adobe Edge Animate is great. I love it. But it needs to integrate with GSAP better. I think they have a long way to go to become usable in a similiar way to Flash (in terms of ease of delivery) I'd like to see the inclusion of GSAP in these tools as well. They are all horrible. They spit out a rat's nest of code and blow up file sizes. PointRoll actually wont even allow code produced from these types of tools. Instead preferring hand coded animation from the agency or assuming the responsibility themselves to hand code the animation. Sizmek forces you to use their stupid HTML5 builder. DoubleClick has their own tool but it is unclear if they force you to use it like Sizmek. Either way, I would rather hand code it, or use a tool that outputs lean markup in HTML or SVG and uses Greensock as the tween engine. The out they produce. Bulky code. Have to spend too much time reducing file size. None of them is really perfect. No one builds a sleak library from objects like vector graphics for direct animating on canvas. We would need a tool for minimalistic css3 only animation on the one hand, and enhanced animation with all the JS on the other. Worst are the online editors, which brings the whole workflow of a complete flight to a halt. Animation standards or options. Some use CSS Transforms others don't. Must have: CSS Transforms. What do you feel is missing from the HTML5 banner discussion? Cross-browser testing, specially IE10 should be stopped - totally useless The problem of cross browser/device compatibility issues like transform3d. The lack of specs and basic templates. Each platform still uses there own implementation despite IAB standards. IAB should better update there information. Most networks and publishers are only interested in clients with marketing skills and show a lot of graphs why people should advertise with them. But lack a good spec/FAQ site. If at all available they show Flash 8 clickTag info... HTML5 banners should have an uniform clickTag system like Flash It would be nice to have a simple/lightweight fallback system when features of html5 are not available Seems like most folks doing html5 banners come from the Flash world, and are afraid of learning html/javascript/css. After making the Flash to JS transition myself, I found it was really hard to figure out best practices in terms of setting up javascript files. I was so used to the wonderful AS3 class structure, and so I dabbled with JS prototypes, and have now settled on the "Revealing Module Pattern", http://christianheilmann.com/2007/08/22/again-with-the-module-pattern-reveal-something-to-the-world/ Interesting point about what file size is appropriate for a HTML5 banner. I spent 10 years compressing the hell out of images, trying to educate designers and clients about the limitations of 40k banners then BOOM, its decided that Flash is dead, HTML5 rocks so then the publishers allow a 150K+ for HTML5 banners without polite loading. The Clients should purchase their brand fonts in webfont formats, and they should make them available for web usage.My biggest issue right now is as a developer trying to help my designers transition to HTML5. I think the push to get rid of flash was fairly premature in that people wanted to get rid of flash but the only viable alternative is a non-standardized still in the development stages language that it's better than it was a year ago but still doesn't approach what you were able to do with flash. So now I have designers who are scared that they are going to have to learn CSS and JavaScript and html in no time flat when they don't have any programming skills or desire, and since there's no good IDE for them to use their options are limited. All of this while clients still expect to have the same level of animation and interactivity in this new environment that they have with flash and they still expecte it within the same file size limits. Basically clients want brand new technology based on specs that are almost 15 to 20 years old now Popular JS libraries that are potentially cached should not be counted against us for file size. IE GSAP, JQUERY (when needed), etc. STANDARDS around file size, what counts toward file size what doesn't. There's not true spec or clear answer as to files we can develop and deliver. Most of the advertising market is based on specifications which predict flash banners in single files and low sizes. This pattern is a reflection of our past in which internet connection was much slower, and the realtime bidding market works in that way to assure high scalability. As today we're in a transition to a "HTML5 world", strategies to make the changes more smoothly are welcome, as for example merging images to a single spritesheet so that less calls are made when serving a ad. I think specs/standards is the biggest thing that we need to figure out in our industry. What browsers should we be targeting? How do we deal with web fonts? I tried to subset a font I was using a few days ago, but the font license wouldn't allow it. But I needed to use an actual font, because the text in the banner had to be dynamic. the companies involved need to work together (google, adobe, etc) to develop a standard, lowest common denominator solution for html5 banners. File size, compatibility, Flash player still works! (news to chrome: safari tried this already, still use flash fine). Flash was created to have a common playground across the browsers, so you have one unified experience. Yet, Chrome thinks it's a great time to capitlize on getting people to spend more on rich media advertising fees for HTML banners, which are less capable, more complex to build, and a step back in technology. Flash was ahead of its time and if it came out now a days, it would change everything! lol Newer doesn't always mean better. Everyone is so quick to kill Flash and embrace HTML5. The headlines are always "Flash sucks, it needs to die". Most of these people just see the headlines and don't work with both technologies. HTML5 banner production is significantly more time consuming, more complicated, more error-prone, and less efficient bandwidth-wise, and have silly creative limitations (hello blend modes and masking). Agency veterans usually understand this, but everyone else doesn't and is going to learn through bumps and bruises over the coming years as we get this stuff out into the market more. One more: packaging is missing from the conversation. We had SWF, an easily quantifiable banner unit. Now we have a folder of uncompressed assets that get uploaded. One more: fonts. With Flash, we used desktop fonts and just embedded vector data, giving us nice font representations on the web. Now, we have to use webfonts, which the foundries have figured out how to restrict and charge separate licenses for. So, now we're paying a lot of money for webfonts and loading up font files that can be several hundred K. It's a mess. We typically avoid that and just use images. there needs to be standards. the same way iAB ad standards was created. Developing for so many platform, we still need unified testing platform. Greensock makes the browser compatibility discussion mute but the tools required for a non-developer is not there, even with edge animate because edge uses createjs and various browserspecific features so it's not ubiqitous as flash so if there was a visual toolkit that packages all that's need for banners we would be far in replacing flash. I think there is a huge gap between what ad networks think is a creative ad format, and what creative agency Art Directors think is a creative ad. Ad agencies think that the expanding swipe-galleries (with embedded autostarting video) are all the rage, AD-s think in interactive movie FX quality (with fully featured physics-emulation, real time lighting and CMS level database handling), story-telling, synchronised banners are a bare minimum. (And then there is the client, which adds a whole new dimension to the problem). As a dev, I'm in the middle trying to hack the tools to deliver something that vaguely resembles to the overloaded storyboards to fit in 15sec and 40k. All the HTML5 banner demos, showcases, examples I saw from the ad networks are very dull, sketchy and disappointing. (btw, the same is true to their specifications.) ADs can't grasp what is possible to develop only by skimming thru those samples. Some kind of training-ground would be nice where the industry players could exchange information, know-how, ideas, etc. Love the work that has been done to make this compatible with many browsers. Just going to take time and testing to make sure everything is consistent. Ugh. Guidance from IAB. They should have released updated HTML5 recommendation by now but they are sitting on their hands. Many publishers are still applying Flash specs to HTML5. There is a leadership void... a new IAB has an opportunity to emerge if anyone wanted to start their own organization based on HTML5 and mobile advertising. we nee more paticle system generators, blend modes, video sniffers(play, end, ff, rr, cta on a video end), it's good to know code, but it takes away from having to stick with worthless pieces of code when your trying to get your animations across. At the end, no one really cares about the code but how visually stunning it looks. File size and scattered resources and cross browser compatibility, effects. The 4 biggest disadvantages of HTML5 compared to flash. AL That Has To Be A dressed. Some way to visually animate in a timeline based way with Greensock would be ideal. Having animators animate with code does not produce the same results. This is why we often have animators do work in createJS but we would like a system that works the same just with JS animation on divs. I think the biggest issues right now are outdated specs and lack of understanding of the html5 landscape within the industry. ad server plugins like they had for flash. Just exclude set js libraries from the file size limit and utilize CDN's. Only make sense. It would be cool to get bounded animation sequences. For example, a bird never takes a straight path, never holds the same altitude. I can model bounded random paths fairly convincingly adding sine waves with bounded random period, phase and amplitude. (Also works well for things bobbing up and down on water.) Responsiveness. It is soooo hard to make an interactive banner work on so many screen sizes as well as phones. Most of the solution is to just use a stagnate image on a phone that is more square, but then your message gets lost. Not sure of the solution as I have not seen any I am super happy with. Always looking tho. The banner advertising industry is not yet prepared for this HTML5 thing. Ad servers not prepared. Publishers not prepared. Agencies not prepared. They all want to go HTML but the mindset/framework is still based on Flash. Why do banner ads have to be so darn annoying. No one is talking about how flash was a better medium for ads. I do not think that HTML5 will ever be as good as flash was and the fact that we are moving away from flash is not because HTML5 is better but because of how political it all is. Flash was the perfect solution and the only problem it ever had was that the specs were crap and never revised by the IAB, If i could go back to flash i would in a heart beat and I would much rather see apple have to allow flash on IOS than see it removed elsewhere. Lot's of ignorance around file sizes. Publisher specs always note 40k like it was Flash. Maybe last year, there wasn't clarity on best practices from interactive advertising bureau (IAB). I didn't go into this to be a coder. I loved that banners had a balance of everything. Now I feel it's becoming a code game. I starting to lean more into motion design due all this crazyness Agencies and advertisers need to know that in this new world of Flash-less banners we need more file size That html5 is not yet ready today A standard framework from the media companies. Ie 40K use to the the standard for flash, but now no one knows yet. More tutorials on building complex banners like lighbox banners, or expanded banners with video. it would be great to have a "best practice" advice. The future of Canvas element in HTML5 banners. Animating the DOM is not the future. What's the timeline for when Canvas is accepted? There should not be a system that generates code and display. Your tools work great and apply to all applications. I feel like most discussion on the web today is surrounding HTML5 for use in the gaming industry and web development industry. Topics such as file-size have been largely irrelevant until now since HTML5 has become the #1 technology for the ad industry, almost overnight. We need more resources for ad development that help us rapidly and efficiently hit the required specs provided by publishers. Most important, I think, is file size, as well as libraries and frameworks that allow better masking, curved animation, particle effects, and canvas manipulation. 2. what animations are preferred for HTML5 banners in general 3. what basic techniques are used by me to make banners 4. more publishers (Google Adwords also supports HTML5 banners now) Globally there is a big unity problem, some servers needs one html without js inside + 1 js + 1 css + pics, other servers needs 1 html with css and js inline, some accepts CND calls, others don't. Every tool exports the code their own way and it is sometimes difficult to understand where to put your own code. When I do a flash banner I must sometimes duplicate it because 1 adserver wants AS2 and another AS3, the modification is minimal, it's quiclkly done. With HTML5 I need to do it once for google, once for sizmek, one inline, once with CDN call, another without... and it's not a little quick adaptation, it's every time a complete startover. A way to easy program with canvas A clear understanding of requirements (size / imports). The documentation on Google is lacking. Not that the clickTag was ever that clear either I suppose. I much prefer to use greensock in my ads over timeline animation, but am never sure if I will get rejected because of it. Would love a JS equivalent of TweenNano. Maybe dropping IE8 support for a lighter footprint. Been getting some questions/pushback on total file size of banners. File size is too big. All the agency actually want very complex banners. But everytime the limitation is filesize. We have to start to update the boundaries in terms of ksize restrictions. The 40Kb benchmark is not realistic now, it was in the past because it was set based on a specific technology and the average bandwidth of the typical web user. However, that needs to change and take in count the limitations html5 have compared to what Flash offered in the past. If not, we will be doomed to create ugly, and very limited advertising pieces and that will be a pity. At the moment no publisher has any HTML5 specs, also the ad weight is not handled properly across agency. Some only throw the adtags in a tab, use httpdfox and count untill all assets have loaded. this way banners can be far more then 500kbs, especially mutli products/images With a swf it was easeier to say the file size. Even when flash files where loading eternal sources, the file wight that was charged by the publishers is only the initial swf. so you can have a small swf polite loader that loadsall assets. Something like this for HTML5 would be great. Some how Flash had these amazing optimization tools. I don't think any IDE is going to be successful unless they can make neatly packaged exports. I really enjoy working with GSAP and pretty much owe a career to it. Just keep doing what you're doing and I'm a happy developer. Also, I'm feeling a talent strain. Those who continue to only do Flash development rarely make for good HTML5 developers. And I think a lot of skilled developers think banners are beneath them and have moved on to other development. So, I think there's a talent shortage. Nothing you guys can do about that... I want tools! Actually what I want is an Adobe tool that can be used, I haven't had to much luck with Edge or Flash. If Adobe could come up with a better tool that developers can use to create HTML5 animations they could rule the marketplace again. Also Standards, lets start buildign these out the same way an possibly utilizing some cached libraries Who creates HTML banners? Mostly guys with Flash background. Why? Because they are used to timelines, animations, easings and telling a story within a short time. They know it's about a transition and a nice effect to catch attention. Most HTML developers think in states and lack for a sense of animation. Consistency across the publishers, access to runtimes via CDN to not be counted in file size, individual asset optimization, individually creating and deciding on each piece throughout the whole entire workflow. It would be great to have a nice simple easy to use IDE where I can easily layout out my elements. This would speed things up. Video doesn't auto-play in iOS so we need a way around that or to rethink banner structure. Anyway html is not necessarily more effective than flash in terms of advertising. People will still ignore banners and be annoyed by them. Html5 wont help with clutter, and wont help the browsing experience. We need to develop digital advertising that doesn't annoy. The digital ad industry has its head in the sand about this. I used to make banners in flash when there was time to experiment and adding just a little bit of playful user interaction would trigger a positive experience to the ad instead of just counting conversion rates. the client often does not understand that setting up html5 ads costs a lot of time, copy changes are more of a drag than before, and kb's rise quickly. 'You can do the same in Html5 as in flash right?' - yes, but you need to buy different amount of display KBs and expect a different production timespan There's too much talk about what is possible with HTML5 and the latest browsers when lot of that stuff is something you probably shouldn't do now and won't get away with. I think more standardisation is needed although it sounds restrictive. I don´t know... Media booking companies continue to book Flash spots and never offer an html option. As yet I have not published an HTML5 ad. Publishers are also sticking to Flash and not supplying any guidelines for HTML5 flash supply. Reactionary urgency. Expectation that converting to HTML doesn't cost money. Or time. web fonts are a big problem, too heavy for banners. we like to use css animation rather than js, but greensock is great if we're doing both Flash and HTML5 of the same concept Think I've had my fair share of rant above. The thing that is difficult to lose with Flash is the layout tools. I would lay everything out where it is going to go and then just tween .from Particle systems, video cuepoints, 3D properties. File size limit expansion. Standards and testing tools, an email on acid for banners. DoubleClick, Sizmek and the like provide poor feedback and frequently templates and advice that doesn't work in practice. For me the tools need to not only make it easy to use but meet the requirements across major browsers and pass QA without issue. Using custom fonts is still a bit of a problem since DoubleClick doesnt accept WOF extensions. Nothing you guys can do about. I think the biggest thing that has been overlooked in the transition from Flash to HTML5 banners is the major differences in development. The ads are still being designed the same way, clients are still expecting the same level of creative and interactivity, budgets are unchanged, and media / publishers are have not really adapted their specs either. But from my experience, the same banner will account for upwards of 50% more file size in HTML5 over Flash, and can take anywhere from 25%-50% more development time to make. This is obviously dependant on design, but complex designs require much more complex solutions in HTML5 rather than Flash. Of course this will change over time, but this is how it feels to me currently. Take drop shadows on a transparent PNG for example, in Flash this is a no brainer, import the png, compress it with JPG compression, and give it a drop shadow in the IDE with ZERO addition to file size. In HTML5 you either have to save the png with the drop shadow then crush the PNG, or you can try your luck at a non cross browser filter solution. Then dont get me started on fonts! How many agencies / clients own the web font kit version of their font? The point being that the additional challenges around file size and cross browser compatibility / hacks fall squarely on the banner developer, who is quite likely still working within the same budget as before. So currently I'd imagine many devs are losing a bit of cash in this transition period. more real, great art (and artist) is needed to convince the public to this technology I think overall the 40k file limit is ridiculous today especially when you see people load tumblr sites with animated gifs at 1Mb. 1Mb is obviously retarrdedly large for mobile devices, but given the fact that people will wait that long for an gif, they should be okay with a 100kb - 150kb file that animates. Memory is cheap, bandwidth is getting faster, 100kb isn't as much as you think it is anymore, the industry really needs to move up from 40k to 100kb animations generator All the HTML5 ads I've worked on have been built in DCS, FlashTalking, and Sizmek. In doing so, I've been able to use those platforms' APIs to politely load content, thereby getting around small file size limits. It'd be great to have an industry-standard method for polite loading which wasn't platform specific. I think there is no clear "standard" and Google will probably set the bar so low that we wont be able to create the ads that our clients expect. Its also hard for a flash developer to see a clear path of what to spend time learning, what is going to be the main language used to build banners. From my experience from learning CSS, JQuery and GSAP, I am hoping GSAP will be able to be used, as I really enjoy using it and think its probably the best way forward! Keep up the good work :) HTML5 banners are making the whole workflow much more complicated than flash. Cross-device and -browser testing, much more production time, and uncounted problems on the operational side of things. Google and Firefox have dictated we use HTML5, yet ad networks are not ready for HTML5 delivery. Very frustrating to find someone, anyone with specs or tutorials for creating ads to work using whichever authoring environmental you want. So you yield something that works on various ad networks. There is not a definitive tool to work with. Some have cool things but miss others. Some of them are for designers, some for animators, and some for programmers. But we miss one for these three kinds of designers programmers, as we had in Flash For RichMedia Ads there´s no problem as more weight is allowed. For Standard the debate is on and live. We are not sure what´s happening on Sept 1st after Google Chrome announce I wish that media companies and doubleclick would have better templates. Evolution is the biggest problem I see with JS and HTML5. Browser updates are happening all the time and they often break recently developed solutions. The reason Flash works so well, is that it doesn't rely on a specific browser version to work. If their was a way to compile an html page or website with all it's elements into a standalone, that could be viewed in the browser, I think that would solve everything. The good 'ol time line and blend modes... 40KB is no longer possible, we need at least 100KB or more! HTML5 banners are one step forward, one step back. Whatever we gained, we lost big in browser compatibility. In Flash, you made it once and it worked exactly the same for everyone. With HTML5 you spend most of your time adding fixes for other browsers. Clear specs from publishers, a definitive answer on how to serve to desktop, tablet , mobile seperately including desktop ads / ad slots that will appear on mobile because the publishers site is not mobile friendly and still shows the desktop site when on device, and thus desktop ads can be seen on device Why do we need animation software? It is far easier to make a framework just code it - the at least you know what is going on. Also - responsive banners, we should all be making these cross browser consistency. Fonts, animations, canvas data access.. etc... all vary from browser to browser. Animation, specifically character animation, cross browser COMPLEX animation with small vector graphics. You can't hand code that stuff, it would be crazy to ask someone to do that. We have thousands of talented 2d animators that would tear their hair out at the prospect of doing it with code. It feels like they've killed off a tonne of professionals purely because of Steve Jobs personal vendetta. K sizes do need to be a bit more generous. We've seeing them pushed down to 40K. The other thing I wish were not counted against K size is standard JS libraries like Greensock. We consistently break the rules by not including common libraries in our uploaded code but, as I said, it's breaking the rules. We get away with it though. I just wish it were officially accepted though. Mobile support gestures... With Chrome disabling Flash explicitly for advertising, it's a questionable decision. Namely what do they hope to gain? Some special effects are a lot harder, if not impossible in HTML5. It costs more to produce, more to QA. It weighs more in terms of file size. More files to handle. Unresolved specs. Media vendors fighting over territory with their own proprietary tools for HTML5 banner construction. Ultimately, from a production standpoint, video would be a much better option. I can produce literally any special effect I want and use video assets the client gives us instead of trying to emulate them. (I am currently struggling to reproduce the effects in a 40K flash ad procedurally to mimic the kinds of things the clients are doing with their TV commercials... why not just use their commercial video assets?) QA also becomes almost unnecessary with video... (except for the CTAs) I think more, and more agencies will push for video ads. In fact, the only hindrance is that video buys cost more, but when compared to extra effort and loss of fidelity for HTML5 banners? I think the option becomes more desirable. As a user, I would hate it... Three megs for a banner? NOPE. Ad block that crap. Achieving same results with flash with GSAP easily. Sometimes a visual timeline to place elements on the stage is easier, but I like the power of GSAP and the ability to see all of the code. I don't like how EDGE 'packages' up the javascript and you can't really see it or edit it any where as easily as when working with GSAP. The industry needs to get some specs & standards together ASAP. Sizmek let's be build units however I like, but Google Adwords only accepts units built in Google Web Designer? BS. Fonts are a huge issue. Creatives and clients have exceptions of seeing their brand fonts in ads. Google's "Font Locker" can't come soon enough. I would like to see which way developers are choosing to animate, css, js or svg One minor help would be the ability to see the exact length (in time) of the animation rather than have to manually calculate it or time it off the screen. This is not a big deal, but since most banners must be 15 seconds or less, it'd be nice to easily see a running count of the time when developing. I'm glad browsers are starting to block Flash. With Chrome announcing their plans for a block in September the industry is finally starting to prepare. Flash was really cool but we've all seen poorly programmed poor performance examples. It's time to move on. I really think people should start embarcing straight up code, and those code pen examples are a great start. That being said, there is still a large market for a friendly user interface / timeline HTML5 creator, espeically for people just starting out. Flash had a good balance between the two. responsiveness I think a sheet of properties that you can animate with and without the CcSplugin would help. I'm still vague on that. That it's not just about ad banners. It's about all forms of timeline animation and how to properly fit and make them responsive and reliable. Someone please give us a real world tool we can use for our clients. Right now we are kind of left hanging. Whether or not you can link out to the JavaScript's CDN or having to include it with the files that are uploaded (can help with file size.) Obviously custom web fonts. HTML5 banner discussion as a whole. File size limits. Converting text to png or svg. Whether to use javascript or css animation. There's plenty more to add to this! Browsers. And their support for essential features. Following standards. Publishers. More websites should discourage the use of banner-blockers. Mostly same as the 2nd answer: That most of the content providers in Norway do not allow GSAP. I think they are trying to limit over-animating stuff, which may affect sites on mobile devices. Guess this is something they have learned from using Flash. The fact that when it comes to bang-for-bucks for file-size and compelling, high-quality animation (on desktops at least) Flash is still the best, most mature tech. there should be animation presets, like a typical wobble for CTAs, also motion blur and glare effects.. and better/easier masking Just as above really - standards (I think this should also be the case for e-mail marketting - but that's a different issue) PLUS I would welcome an open source (or even avordable) IDE with some sort of front end and timeline likne EDGE animate has but with decent core JavaScript integration - the code side of EDGE sucks Transparant video support. This is the one thing missing to completely replace flash how to make a useful experience instead of a shouty and annoying one. I have no idea how to have the same, or different, easy workflow that I'm used to so far. So that's my biggest concern. The overall simplification of banners that is happening to "upgrade" to this new tech. We have taken great lengths to educate clients and brands on the new limitations and why specs now play a larger role in that conversation. Getting universal specs would be a huge step, then getting a great animation tool build for HTML5. I mentioned everything above. I want a nice WYSIWYG Editor for HTML5 Banner Educating the traffickers that grow up with Flash. 1) SPECS SPECS SPECS 2) We need to establish one spec that we can use for single size banners, and perhaps another one for truly responsive or multi-size banners. 3) Maybe a frontend js framework like angularjs could be used to help bootstrap banners for certain sizes, so we have 1 banner ad on the ad server that just sizes itself to wherever you put it. Oh yay - a rant! I really feel file sizes need to be discussed, most of my publishers are only accepting 100k unzipped units. This just isn't enough space for a decently creative unit. It just seems there is a huge disconnect between publishers, traffickers, and developers regarding how much space these units should be taking up. CDN support for animation libraries. Sizmek & DoubleClick will not allow this for X platform and support reasons (so they've told me). So I have to bundle up GSAP with each banner. Seems nonsensical when they're both using ad builders that utilize GSAP. canvas, we need a way to have keyframe animation but that can be loaded as an external asset just how we used to do with secondary swfs. We need a way to apply image sprints to a canvas object and control it like a movieclip. Also most vendors have a 8 to 10 file limit and they are not accounting for retina display. Most vendor dont support folders, so we need to have everything at the same level, makes it a mess to work with. Not enough discussion. Also, most of extremely poor quality. Hard to justify time and effort to clients when wanting to make something great when their expectations are so low.

Note: the ActionScript version of the GreenSock Animation Platform still works great and you're welcome to use it, but it is no longer officially supported. Our customer base made it very clear that JavaScript was the future of web-based dynamic animation, and we have been focused there for years. Please see the JavaScript Getting Started Guide for more information. Quick links Introduction Installing the code Importing Basic tweening with TweenLite Special properties Plugins Overwriting other tweens Controling tweens Which class do I use? TweenLite? TweenMax? TweenNano? Building a sequence with TimelineLite Need help? Introduction Animating with code may seem intimidating at first, but don't worry - you'll get the hang of it quickly. The GreenSock Animation Platform (GSAP) was engineered to make it simple and intuitive. For now, we'll focus on getting you up and running with the core engine, TweenLite, and then we'll discuss if and when you might want to put the other tools to work for you (like TweenMax, TimelineLite, TimelineMax, etc.). Installing the code Go to your account dashboard page and click the AS2 or AS3 link in the downloads area to download a zip file containing the entire GreenSock Animation Platform in the language you specified. Unzip the file and you'll see a folder containing several swfs, documentation, and a folder named "com" - that's the critical one. Take that "com" folder with all its contents and drop it into the same folder as your FLA file (or if you're an advanced user, set up a classpath to wherever you want). Make sure that you leave the directory structure inside the "com" folder in-tact; it has a "greensock" folder with several ActionScript files inside, along with a few subdirectories. You can throw away the swfs from the zip download and the documentation, etc. if you want. The only critical files are inside that "com" folder. When you publish your swf, Flash looks for that "com" folder, reads the code from inside of it, and embeds it into your published swf. You do NOT need to put the "com" folder on your web server. Once the swf is created, it is completely independent and has no dependencies on the class files because they have been embedded into the compressed swf. Your FLA file has the dependencies, not the swf. There's a great ActiveTuts article here about using 3rd party tools in your Flash projects and it covers some of the more advanced installation/configuration options. Importing In order for Flash to understand what you mean when you type "TweenLite" (or "TweenMax" or any of the GreenSock classes), you must tell it where to find the class file(s). That's what an import statement does. It acts as a pointer that tells Flash where it should look. After all, there could be a completely different "TweenLite" class that another author created, and you need a way to tell Flash which one you're talking about. Typically you put your import statement at the top of the frame or the custom class you created. And, yes, just like any class, you must add the import statement to all frames or classes that contain code referencing it. This does not add extra kb to your file every time you import it. Flash is smart enough to embed it once and all the import statements just act as a "pointer" to the embedded class. To import just the TweenLite class, do: import com.greensock.TweenLite; To import TweenLite and TweenMax, do: import com.greensock.TweenLite; import com.greensock.TweenMax; To import all of the classes in the com.greensock package (don't worry, Flash will only embed the classes that you actually use in your code), do: import com.greensock.*; You'll probably also want to import the easing classes as well (we'll talk more about them later), so this is code that you should get used to putting at the top of your frames or class files because it covers almost everything you'd need and it's shorter than typing out each class every time: import com.greensock.*; import com.greensock.easing.*; Basic tweening with TweenLite Each tween you create needs a target (the object you want to tween), the duration of the tween (typically described in seconds), and the properties that you want to tween, along with their corresponding end values. Let's say, for example, you have a MovieClip named "mc" and you'd like to tween its x property to a value of 100 (sliding it across the screen) over the course of 1.5 seconds. You can use TweenLite's to() method to do it: TweenLite.to(mc, 1.5, {x:100}); The first parameter is the target, the second is the duration, and the third is an object with one or more properties that correspond to your target object's properties. Since it's a to() tween, you're telling TweenLite to tween from whatever the x property happens to be at the time the tween begins (now in this case), to a value of 100. If you want to also tween the y property to 200 and the alpha property to 0.5, you'd do: TweenLite.to(mc, 1.5, {x:100, y:200, alpha:0.5}); There is no limit to the number of properties you can tween. And TweenLite can tween any numeric property of any object, not just a predetermined list of DisplayObject/MovieClip properties. Since there's an AS2 version as well, you can simply change the property names to reflect their AS2 equivalents, like: TweenLite.to(mc, 1.5, {_x:100, _y:200, _alpha:50}); Here's an interactive demo that allows you to build tweens yourself and see the corresponding code at the bottom: There is also a very useful from() method that allows you to define the starting values in the tween and go backwards. So the current values will be used as the end values, and the ones you define in the tween will be the starting values. This makes it easy to, for example, set things up on the stage where you'd like the objects to end, and then animate them into place. Let's say your mc object's y property is at 200 and alpha is at 1, and you'd like to have it "drop" into place from above while fading in over the course of 1.5 seconds, you could do: TweenLite.from(mc, 1.5, {y:0, alpha:0}); If you prefer a more object-oriented approach and/or would like to store references to your tweens in variables so that you can control them later (for example, pause(), resume(), reverse(), restart()), you can create a tween like this (which is identical to a to() tween): var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:200, alpha:0.5}); Special properties A special property is a reserved keyword that TweenLite recognizes and handles differently than it would a normal property. One example is delay which allows you to delay a tween from starting until a certain number of seconds has elapsed. For example, this tween will wait 2 seconds before beginning: TweenLite.to(mc, 1, {x:100, delay:2}); TweenLite recognizes several special properties that are quite useful, like onComplete, ease, overwrite, paused, useFrames, immediateRender, onStart, onUpdate, onCompleteParams, and more. Please read the full documentation for details. Two of the most common special properties you'll likely use are ease and onComplete. To alter the rate of change during a tween, you can choose from many different easing equations from either the com.greensock.easing package or Flash's own easing classes or Robert Penner's. The interactive demo above allows you to chose different equations and see how they affect the tween. The onComplete special property gives you a way to call any function when the tween completes, making it simple to create a chain of events. Here is a tween that uses the Elastic.easeOut ease, delays its start time by 0.5 seconds, and calls myFunction() when it completes: TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction}); function myFunction():void { trace("tween finished"); } Plugins Think of plugins like special properties that are dynamically added to TweenLite (and/or TweenMax), giving it extra abilities that it doesn't normally have by default. Each plugin is associated with a property name and it takes responsibility for handling that property. For example, the FrameLabelPlugin is associated with the frameLabel property name so if it is activated it will intercept the frameLabel property in the following tween and manage it uniquely: TweenLite.to(mc, 1, {frameLabel:"myLabel"}); If the FrameLabelPlugin wasn't activated, TweenLite would act as though you were trying to literally tween the mc.frameLabel property (and there is no such thing). Activating a plugin requires a single line of code and you only need to do it once in your application, so it's pretty easy. Simply pass an Array containing the names of all the plugins you'd like to activate to the TweenPlugin.activate() method, like this: import com.greensock.plugins.*; TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]); To make it even easier, I created the Plugin Explorer which writes the code for you. All you need to do is select the plugins and copy/paste the code from the bottom of the tool. It also displays interactive examples of each plugin and the associated code so that it's easy to see the correct syntax. TweenLite does not activate any plugins by default, but TweenMax does. When a plugin is activated, it affects both TweenLite and TweenMax. Overwriting other tweens An often overlooked aspect of tweening is how (and if and when) tweens overwrite other tweens of the same object. For example, let's say you have a button with ROLL_OVER and ROLL_OUT handlers that tween its alpha higher on ROLL_OVER and lower on ROLL_OUT. To further complicate things, let's say the ROLL_OVER tween lasts 2 seconds and the ROLL_OUT tween lasts 1 second. What should happen if the user rolls over/out/over/out quickly? See the problem? If tweens are allowed to run without any kind of overwriting, they'll build up and fight with each other (one trying to tween the alpha higher, and the other lower). In this example, when the user rolls over, a 2-second tween would start increasing the alpha to 1, but if the user rolled off 0.2 seconds later, another tween would begin, causing the alpha to decrease. When that tween finishes 1 second later, the ROLL_OVER tween is still going (since it had a duration of 2 seconds), so the alpha would suddenly jump up and finish off at a value of 1 even though the user rolled out! Don't worry. We've got you covered. By default, whenever a TweenLite instance renders for the first time (after any delay), it analyzes all other active tweens of the same target and checks for individual overlapping properties. If it finds any, it kills the offending overlaps (again, only the individual properties). This overwrite mode is called "auto" and it is typically the most intuitive. However, there may be times when you want the new tween to kill all other tweens of the same object regardless of their start times or overlapping properties. That is what the "all" overwrite mode is for. And to skip overwriting altogether, you can define an overwrite mode of "none". There are several other modes to choose from too, so check out the full docs for details. You define an overwrite mode with the overwrite special property like this: //overwrites all tweens of mc immediately TweenLite.to(mc, 1, {x:50, overwrite:"all"}); //doesn't overwrite anything (allows conflicts) TweenLite.to(mc, 1, {x:50, overwrite:"none"}); //overwrites only individual overlapping properties on concurrent tweens of mcmyElement (this is the default, so you typically don't need to specify any overwrite in this scenario) TweenLite.to(mc, 1, {x:50, overwrite:"auto"}); //set the default overwrite mode to "all" instead of "auto" TweenLite.defaultOverwrite = "all"; Of course you can manually kill all the tweens of a particular object using the TweenLite.killTweensOf() method, but the nice thing about defining overwrite modes is that the overwriting doesn't kick in until it's necessary (when the tween renders for the first time) which is essential when working with complex sequences. Controlling tweens Once a tween is created, you may want to pause(), resume(), reverse(), play(), restart(), invalidate(), or kill() it. It's pretty easy, actually: var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:100}); //pause myTween.pause(); //resume (honors direction - reversed or not) myTween.resume(); //reverse (always goes back towards the beginning) myTween.reverse(); //play() (always goes forwards) myTween.play(); //restart myTween.restart(); //invalidate (clears out any starting values that were recorded and forces the tween to re-initialize on the next render) myTween.invalidate(); //kill the tween immediately myTween.kill(); //kill all tweens of the mc object TweenLite.killTweensOf(mc); TweenMax has some additional static methods for getting all the tweens of a particular object, pausing them all, resuming, getting tweens of objects that are children of a certain DisplayObject, and more (see documentation for details). Which class do I use? TweenLite? TweenMax? TweenNano? If you can afford the file size (roughly 23kb with the default plugins), just use TweenMax. It is the most full-featured tweening engine and it automatically handles activating a bunch of useful plugins by default, so it makes things very easy. If, however, you're concerned about file size and want precise control over which plugins get activated, TweenLite is for you. It's amazingly capable for its size and has all the essentials crammed into about 8kb. It is really the core of the whole platform and has become incredibly popular. If you simply must shave off another 6k and are willing to sacrifice quite a few features (most notably lack of support for plugins and insertion into TimelineLite/Max instances), use the ridiculously small 2k TweenNano. I would strongly recommend sticking with TweenLite or TweenMax if you can, though, because they offer much more flexibility than TweenNano. All of the engines use exactly the same syntax, so these lines will produce identical results: TweenNano.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); TweenLite.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); TweenMax.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); Keep in mind that TweenMax extends TweenLite, so it does everything TweenLite does, plus more. And the plugins that are activated by default in TweenMax can also be activated in TweenLite (the only exception being roundProps), so with a couple of extra lines of code at the start of your application, TweenLite can have many of the same capabilities as TweenMax (activating plugins increases the file size beyond 4.7k obviously). There are several features that are only available in TweenMax, though, so check the documentation. Sequencing and grouping tweens with TimelineLite Unlike most other scripted animation tools, sequencing in GSAP is much more flexible than building a queue of tweens that run one-after-the-other. You have complete control over the relative timing of each tween - they can overlap as much as you want. And you can control entire sequences as a whole, reverse smoothly anytime, jump to any point, adjust the timeScale(), etc. and everything renders in the proper order. Watch this video for a visual demo showing how TimelineLite can save you a lot of time. Although the video uses the HTML5/JavaScript version of GSAP, the same concepts apply to ActionScript. Of course you could sequence tweens by using the delay special property on all your tweens, but that can get complicated when you build a long sequence and then later want to change the timing of something early in the sequence (you'd have to adjust all the delay values in tweens after that). Plus it would be a pain to control the whole sequence, like to pause() or resume() or reverse() the group on-the-fly. Sequencing is much easier with TimelineLite and its big brother, TimelineMax. Let's jump into some sample code: //create a TimelineLite instance var tl = new TimelineLite(); //append a to() tween tl.to(mc, 1, {x:50}); //add another sequenced tween (by default, tweens are added to the end of the timeline which makes sequencing simple) tl.to(mc, 1, {height:300p, ease:Elastic.easeOut}); //offset the next tween by 0.75 seconds so there's a gap between the end of the previous tween and this new one tl.to(mc, 1, {alpha:0.5}, "+=0.75"); //overlap the next tween with the previous one by 0.5 seconds (notice the negative offset at the end) tl.to(mc, 1, {rotation:360}, "-=0.5"); //animate 3 MovieClips (mc1, mc2, and mc3) to a rotation of 60 degrees, and stagger their start times by 0.2 seconds tl.staggerTo([mc1, mc2, mc3], 1, {rotation:60}, 0.2); //then call myFunction() tl.call(myFunction); //now we can control the entire sequence with the standard methods like these: tl.pause(); tl.resume(); tl.restart(); tl.reverse(); tl.play(); //jump to exactly 2.5 seconds into the animation tl.seek(2.5); //slow down playback to 10% of the normal speed tl.timeScale(0.1); //add a label named "myLabel" at exactly 3 seconds: tl.add("myLabel", 3); //add a tween that starts at "myLabel" tl.add( TweenLite.to(mc, 1, {scale:0.5}), "myLabel"); //jump to "myLabel" and play from there: tl.play("myLabel"); Think of a timeline (as in a TimelineLite or TimelineMax instance) like a collection of tweens that are positioned at specific places on that timeline. It controls their playback. Timelines can be nested inside other timelines as deeply as you want. This is a very powerful concept because it allows you to control entire sequences in a modular way. Imagine 100 characters individually animating into place in a staggered fashion (100 tweens). They could all be grouped into a TimelineLite instance and then controled as a whole (using common methods like pause(), resume(), reverse(), restart(), etc.). In fact, you could create functions that return animations wrapped in a TimelineLite so that you can easily build a larger, more complex animation in a modular way. A central concept to grasp is that every tween is inserted into a timeline. By default, it's the root timeline inside the engine. When a timeline is playing, its virtual playhead advances. If you reverse() a timeline, the playhead travels in the opposite direction back towards its beginning. As the timeline's playhead encounters tweens, it plays them accordingly. For example, if the playhead is positioned halfway through a tween, that tween will render as though it is 50% finished. If the timeline's timeScale() is set to 0.5, that would cause the playhead to travel at half speed. Consequently, any tweens it encounters would also appear to progress at half speed. Once you get the hang of how timelines work, they can revolutionize your animation workflow. Just like tweens, timelines play immediately by default but you can pause them initially using pause() or by setting paused:true in the vars parameter of the constructor. There are quite a few methods available in the timeline classes that give you precise control, and we'd encourage you to look through the docs to see what's available. If you can think of something you'd like to do, chances are there's a way to do it. Just like the way TweenMax extends TweenLite, TimelineMax extends TimelineLite, using identical syntax and adding several useful (but non-essential) features like AS3 event dispatching, repeat(), repeatDelay(), getActive(), getLabelAfter(), getLabelBefore(), currentLabel(), and more. Please refer to the TimelineMax documentation for details. Here's an interactive demo of TimelineMax: Need help? Feel free to post your question on the forums. Keep in mind that you'll increase your chances of getting a prompt answer if you provide a brief explanation and include a simplified FLA file (and any class files) that clearly demonstrates the problem.