emmanuelulloa

I wish I knew Gulp/Grunt so I can just "run grunt" and: Take my .html and minimize it. Take .scss and compile it to .css inside a <style> tag in the .html Minimize my .js inside the .html Optimize my images. Zip my files.

Great input Oliver! I'm still trying to wrap my head around your methodology. Ohem you probably need to ask for a raise. There are not many Flash devs that "survived" the html5pocalypse and there are not many Front End Devs/ JS Devs to make little "boring/stressful" banners. I wanted to ask you though what is your average time to make 1 keysize (from Photoshop to animated banner).

Back in the Flash days it was easier to get these things right. Now is again the wild west and trying to get estimation and pricing in the right spot is quite an art I think. From my agency experience I usually put 8 hrs per banner and 4 hrs per resize, but you know there all different kind of clients from those who sent you the final PSD to to those that take you through 10 rounds of review with 3 re-designs during the project with an non-changing deadline. Right now whenever I plan a banner the first thing I do is see if I can do it all in HTML/DOM with GSAP/JS/CSS3 which is a cheaper workflow (Photoshop and Sublime only) than say Easel JS (which requires separation of Design and Developer tasks and some Flash experience). Do I need to use and animate SVG? Increase the hours. Do I need to use canvas? Increase the hours. Then I remember that I'm probably estimating like in my Flash days so I multiply the hours by 1.5 since HTML is slower. Do you charge per hour or per banner? Are clients more willing to pay per banner of per developer hour? Is it cheaper now or is more expensive with HTML5? How do you manage large campaigns with say 50 banners? Where do you cut costs to be competitive? Let's talk about the art and science of making banners.

Try changing your http calls for https.

A client is asking me if it is possible to show different CTA's depending wether the banner is being viewed on desktop or mobile ("Learn More" or "Download App"). What is your JS snippet for detecting the environment?

Hi, I'm working on a banner ad campaign which specs says in regards to size: Max file size: 40k. Max polite file size: 150k. When researching about GDN Banner Ads and polite loading the only thing I get is: https://support.google.com/adwordspolicy/answer/2804378?hl=en Which states: Maximum initial load is 50KB, and after initial load, you can have up to 2.2MB "polite" load.My question is where can I get sample code where it shows how to polite load a banner for GND (not Studio so I guess is sans Enabler).

My 0.02 cents. My html/css/js boilerplates for 300x250 for DCM, DC Studio, Atlas, Sizmek and Flashtalking. BannerTemplates.zip

Yes eventually we will come to get rid of -webkit- in transitions, animations, filters and transforms and using CSS for animations will be as normal as using border-radius for rounded corners (still remember the days when I had to photoshop rounded corners inside tables).

Well Jack I understand that trying to do a 1 to 1 match between what GSAP can do and what CSS Animation can do if not imposible is not worth it. My point is that so far there is no good tool to write css animations rather than write it yourself from scratch. It would be great if there were a plug-in that allow us to use our knowledge to write JS animations to accelerate production of CSS code. So far most major web development using CSS animations rely on Animate.css which is a group of premade css animations, eventually having the web looking the same.

Exactly like taking snapshots of the rendered results of the GSAP tweens but in css code instead of images.

Here is a fun idea: use GSAP to generate CSS Code. It would be a nice plugin to write a GSAP animation and have it output a CSS animation in N frames. I imagine it would be something like what Bounce.js does (https://medium.com/tictail/bounce-js-smarter-keyframes-ffa13a501ea7#.9tdmhd7z3). There are some environments that due to setup or legal issues it wouldn't allow to add a 3rd party library, but still you need to use the same timing/animation effects you used elsewhere. A plugin that allows you to export your animation to CSS animation will certainly help a lot.

I came across a large banner campaign recently and my approach was as follows in order to be under the 60k: #1) Draw the line with ie9, anything below that will get the backup image. Show backup image #2) ie9 gets gracefully degraded to a frame by frame (gif like) JS managed animation. #3) All other browsers (ie10, Edge, -webkit- iOS/Android/Safari/Chrome, FireFox) will get CSS3 animations/transitions. #4) Save text with a .png image and use css sprites for the text areas. #5) Use JS setTimeout to add and remove classes to DOM elements and control the banner "timeline" and duration. #6) CSS matrix and CSS bezier-cube are my best tools when animating. Don't get me wrong. GSAP is GREAT! but until I do not have to "fight" with the Rich Media platform people, QA and client on why the library weight shouldn't count towards ad unit size I won't be able to use it. :\

Very interesting video, most of the development I have seen in HTML games is through canvas. Here you decided to go with DOM animation and it does make sense with all the screens and text. Since I have been involved recently in animating HTML like if it were Flash I found your two first tips so very true: Animate objects with absolute position. Animate dom elements as images or divs with a background-image. (Perhaps because of my Flash background I find that way more natural). Pool objects: Good Choice! I have some questions/suggestions though: Do you truly have a file with 49k+ lines of code? Your code seems a little bit verbose (if, else, for loops), do you use ternary operators? I also heard/read that while loops are the way to go when doing very intense operations (that is usually what I go for). var i = 0, l = myArray.length; while(l--){ console.log(myArray[i]);//so you start with 0 i++ } What about implementing constants for the eases (I see that you use them directly like Quad.easeIn instead of var EASE_1 = Quad.easeIn). Great info, keep on posting videos, I really want to learn about your findings!

So Timo, just to be clear you uploaded a file with .gzip extension?

I'm trying to come up with some aprox. file size numbers for a client on an estimation for a banner ad. So if I use GreenSock it would be: TweenLite.min.js = 26 KB EasePack.min.js = 5 KB CSSPlugin.min.js = 35 KB That's the bare minimum I would need right?

Usually what do you consider the MUST have easing functions when size does matter? If you were given a choice of only using 3 which ones would it be?

What would you say is the closest penner equation to this css bezier curve?: http://cubic-bezier.com/#0,1,.5,1 Does anybody knows of a tool/generator to to translate css bezier equations to an equation and/or back?

This is a great post. I'm also looking into creating HTML5 banners by trying to match it with my Flash Banner experience. Has anyone come up with an HTML5 and CSS template to start with? What browsers should you shoot for? (Specially on the IE spectrum). This is the Doubleclick recommendation: Ad serving and previews for mobile web and desktop HTML5 creatives (In-page, Expanding, or Floating) Supported operating system versions Supported browsers Note: The rich media backup image is served if unsupported browsers are detected. Windows (Windows XP/Vista/Windows 7) Mozilla Firefox (4+), Safari (5+), Chrome (9+), Internet Explorer 10 Mac (OS 10.5.x+) Mozilla Firefox (4+), Safari (5+), Chrome (9+) Safari (6.1+) running on the Mavericks Mac OS: If both HTML5 and Flash creatives have been uploaded for the ad, the HTML5 creative will serve instead of the Flash. This is because Safari's Power Saver feature pauses Flash content. iOS (7.0+) Safari Android (4.0+) Browser How important is to have a Selector engine anyways? Isn't document.getElementById() be enough and then leave the rest of the work to GSAP? Some reading from the Doubleclick folks: https://support.google.com/richmedia/answer/2672512?hl=en