Oliver16Years

Do Yourself a favor and avoid GWD in a big arc. Anything is better than that weird kludge. The adWords and DoubleClick formats are well documented. You don't need to use GWD to make ads in these formats.

/// OffTopic

I think You can write Your code in shorter format: var tl = new TimelineLite(); tl.set(txt2, {opacity:0}) .to(frame1, 1, {alpha:1}) .to(frame1, 1, {backgroundColor:"#ff6a6a"}) .to(txt1, 1, {scaleY:0, ease:Elastic.easeOut}, 2) .to(txt1, 1, {alpha:0, ease:Elastic.easeOut}) .to(txt2, 1, {alpha:1}),"-=2"); We don't need to use getElementByID(). The DOM elements with an ID somehow already have a reference in JS.

As I know autoAlpha is the best, because it is turning off the DOM element with "visibility:hidden" when i'ts opacity is 0. Am I right?

http://www.bannerhost.hu/nestea/Nestea_Erdei_640x360_01c_SIZMEK/ Smooth scaling (I hope), reused assets. Café Next http://www.bannerhost.hu/fressnapf/Fressnapf_Marcius_640x360_ADVERTICUM_03/ It was hard to implement, don't look at the code, it's ugly Inframe http://www.bannerhost.hu/cola/tasteII/Cola_TasteTheFeeling_II_640x360_DOUBLECLICK/ A simple particle engine. Café Next http://www.bannerhost.hu/toyota/tcm/TCM_Tactical_JANUARY_topky_anim_300x600_SK_02/ A little wheel and chassis work. Saatchi & Saatchi They are all DOM/GSAP based.

Awesome! How much time did it take to develop this ad? Could You please describe Your workflow in a few words? As I see, this is a hand coded canvas with multiple DOM canvas layers. Did You make other size mutations?

Chrome 50.0.2661.75 and still janky.

This is why im using only optimized .pngs. We are in the middle of an HTML wild west. But despite that, I still need to insert browser depnendent code in my banners. One update here, one update there and my carefully reseached code is not able to evade the pixel snapping or scale caching bugs anymore.

var tl = new TimelineMax( { repeat: -1 } ); tl .from("li", 1, {delay:2.5, y:-500}, 3) .to("li", .9, {delay:12, opacity:0}, .5) .to("h1", .7, {delay:5, opacity:0}, .8) .from("h1", 1, {delay:1, x:-500}) .from("h2", .7, {delay:12.5, x:500, opacity:0}) .from("logo", .7, {delay:5, x:500, opacity:0}) .to("ul", 1, {delay:5, top:"-60px"}) .to("ul", 1, {delay:7, top:"-60px"}) .to("ul", 1, {delay:8, top:"-120px"}); If You included TweenMax, You have TimelineMax too. Also possible to chain the methods with dot syntax.

This is elegant and clean! It helped me to understand how to use the delayedCall(). What is the difference between a setInterval() and this function? Is it more reliable or precise? Is it uses the same timing mechanism as the other tweens? I'll test it and put this code into my engine. Thank You very much! Oliver

Hi, Is there a way to access the current iteration of a repeating Timeline? I would like to stop the loop just after the last digit is shown at the last repeat of this numeric counter. This is an automatically generated frame animation: COUNTER1tl=new TimelineMax({repeat:99}); COUNTER1tl .addLabel('d') .set(digit_1,{autoAlpha:1}) .set(digit_2,{autoAlpha:0}) .set(digit_3,{autoAlpha:0}) .set(digit_4,{autoAlpha:0}) .set(digit_5,{autoAlpha:0}) .set(digit_6,{autoAlpha:0}) .set(digit_7,{autoAlpha:0}) .set(digit_8,{autoAlpha:0}) .set(digit_9,{autoAlpha:0}) .set(digit_10,{autoAlpha:0}) .to(digit_1,0,{autoAlpha:1},'d+=0') .to(digit_1,0,{autoAlpha:0},'d+=0.02') .to(digit_2,0,{autoAlpha:1},'d+=0.02') .to(digit_2,0,{autoAlpha:0},'d+=0.04') .to(digit_3,0,{autoAlpha:1},'d+=0.04') .to(digit_3,0,{autoAlpha:0},'d+=0.06') .to(digit_4,0,{autoAlpha:1},'d+=0.06') .to(digit_4,0,{autoAlpha:0},'d+=0.08') .to(digit_5,0,{autoAlpha:1},'d+=0.08') .to(digit_5,0,{autoAlpha:0},'d+=0.1') .to(digit_6,0,{autoAlpha:1},'d+=0.1') .to(digit_6,0,{autoAlpha:0},'d+=0.12') .to(digit_7,0,{autoAlpha:1},'d+=0.12') .to(digit_7,0,{autoAlpha:0},'d+=0.14') .to(digit_8,0,{autoAlpha:1},'d+=0.14') .to(digit_8,0,{autoAlpha:0},'d+=0.16') .to(digit_9,0,{autoAlpha:1},'d+=0.16') .to(digit_9,0,{autoAlpha:0},'d+=0.18') .to(digit_10,0,{autoAlpha:1, onComplete: function(){ /* stop if last repeat */ }},'d+=0.18') .to(digit_10,0,{autoAlpha:0},'d+=0.2') ; If I put a counter variable into the code var COUNTER1_repeat = 99 and decrement it .to(digit_10,0,{autoAlpha:1, onComplete: function(){ if ( !COUNTER1_repeat-- ){ COUNTER1tl.pause() } } }, 'd+=1.8' ) the code works, but seems like a workaround. Not nice in my opinion. Thanks a lot, Oliver

I had only one gate benner yet. I thought at first it must be a synchronous one like in Flash world. But it turned out, the site/media wanted an one piece ad. All of the sides were on one html surface. It was a suprise.

You should convince Creative Agencies because they get the jobs from the big multinational coprorations. I recommend getting in contact with Client Directors and show them Your portfolio. For full convincement, comes a demo job round, which must be free even if they want to pay for your. The best way is to spam them on LinkedIn which spamming You already. If you manage to sign a contract with an agency, you should keep it alive. - Don't coplain on the Storyboard if it seems impossible to realize.If they give you a .psd full with various blend modes. Just start to figure out how it is possible to convert the assets to normal mode. - If they ask about when will you send a file, tell them double time. This way you can finish what you imagined without stress. - Triplecheck your HTML before you send it to the Client. No worse than getting it back from the Media Agency with a list of error messages. I'ts a shame for You and your Creative Agency. https://h5validator.appspot.com/adwords https://h5validator.appspot.com/dcm - Let the ball bounce on their side. How easy to give advices!

I think Flash is too general tool to make ads. It's overall purpose is to make animations, not specifically advertisements. I know it can export various formats with templates. But I need a faster solution to deliver the various masters and size mutations to my clients. Takes too much patience to export all the assets from Photoshop and put the layout back together again in Flash, make layers, moveiClips, try to reproduce the layout which is already made in PS by the art director. The biggest problem is: it can't edit pixels. It can't resize, crop and optimize pixel assets. The code editor syntax highlighting don't changed in this latest, renamed version. I didn't find a way to integrate a professional editor into it. It still requires tweenJS to show assets, even when they didn't moved a pixel. The othes side is: this is the best "official" tool on the market at the moment.

Now in this still wild west, my prices are a bit higher than in the Flash era. When the forced transition happened, I doubled my fees to get a bit of fresh air to learn and try out these so called animation tools. Then when everything is went it's place, I lowered my prices to get more campaigns from my clients. I think the hour based pricing works only with low fees, when nobody cares about 1 or 2 more hour, and Your have long time relationship with the client who is trusting You. Much better if the master's price reflecting it's complexity. Here is my system to calculate the master's price: Graphical elements ( .png, .jpg .svg... ) * 3¥ Animation phases * 3¥ Legal text: 5¥ Custom javascript code or interaction: 10¥ Design without storyboard: 15¥ Adaptation ( use other programmer's source ) : 20¥ The mutation's price is fixed 10¥. The first 3 modification round is free. But after that I charge 4¥ for every review round. This way the frustration of the never finishing master is gone. I do my very best to satisfy my clients ( whatever silly idea they came up ). I hope this system is forcing them to think twice before they asking something new, and we finish the masters within shorter times. These are't real values of course. They reflecting only the ratios. The adaptation is the highest because I don't really like to suffer between countless lines of vendor prefixed css. Instead I usually building the master from the ground up in DOM + GSAP and using the foreign master as an animated storyboard only. The graphical elements are easily countable and their number is reflecting the overall complexity of the master. The client can look into the images folder and can count them too. The animation phases are countable on the storyboard. "If You want a fully decorated, singing christmas tree, pay for it". After counting all these values in an excel table, I often give a symbolical discount and everybody is happy. You can go canvas but better if You educate the designers what is possible in DOM ( IMHO ). The deadlines are often in the past or in the really near future, which made me not take them too seriously. If I say 2 days and the ad is done in 1, then my client is always happy irrespectively of the deadline.

As I know there is no motion blur yet which is cross browser compatible. Check back 1-2 years later. Lol, sorry, kinda frustrating. But if you make a motion blurred and a normal asset in photoshop, and fade in the blurred while moving both assets, You can achieve something similar.

I would use adWords. A simple net user can upload Image Ads ( which means html ), choose target audiences, schedule etc... dunno really, because there is often a Media Agency behind the client, which is organizing these administrative stuffs, buyings, placements.

Save time, avoid pain: choose the red one.

Maybe your delay dummy tweens get across with each other. tl.from('#delay', 0.5, {}) .from('#gCoin1', 0.2, {top: -800, rotation:-50, ease: Sine.easeOut}, '-=0.8') ... I would use label relative timing: .addLabel( 'transition99', 'transition98+=5' ) // next transition starts after the prewious transition's start + 5 sec .from('#gCoin1', 0.2, {top: -800, rotation:-50, ease: Sine.easeOut}, 'transition99-=0.8') ... Just an idea

emmanuelulloa You need the solution from some reason. It is possible (I think). But please enlighten me, why do You want to do this? What environment is where no GSAP is allowed?

If You plan this you have to 1. export all assets 2. create CSS and html from layout 3. tween it with GSAP 4. decorate the html with custom provider code You will get lost very fast between the thorny bushes of CSS. .detmaotua eb t'nac hcihw pets ylno eht si .3 ehT

Till no GSAP to CSS compiler, we can render the whole banner to mp4 with PhantomJS and FFMpeg. http://phantomjs.org/ This PhantomJS is an invisible browser with frame rendering capabilities. It is possible to seek and/or pause on separate frames of the timeline with a NodeJS script, dump the frames into a PNG folder and later FFMpeg them. Here is how it renders: http://phantomjs.org/screen-capture.html Now... what if we capture the whole CSS tree ( or something ) at every frame, make a table or json from it, which could serve as a pre recorded timeline for a simple recursive player?

If we put this little golden key in the css of the root element of the ad, the nice smooth movements are back in IE! transform:rotateZ(0.001deg); No more complaining from the Client who is checking the banner on IExplorer on his office laptop. No visible rotation, no increased processor usage. Its more like a diamond key!

Maybe this? http://stackoverflow.com/questions/3144711/find-the-time-left-in-a-settimeout

Sadly till no kerning support in DOM or Canvas I can't use webfonts. Especially in case of numbers, many times the distance between the 0 and 1 is huge compared to other distances. I can't fix these gaps when my client asks me to bring closer certain characters. Depends on the quality of the font ofc. But! optimized .png is always perfect.