Dipscom

Hey somnamblst, I did not forget your question, it was just a tad too busy the last few days. You are very correct when you say: The answer is down to how much effort I can be bothered and what the client is like. If it is a rather 'preculiar' client, I will look at the creatives provided, see which text matches which format, create the base text and then, only create a "wide" or "narrow", etc variation of the text. BUT, if I have a particular nice client who understands the idea of planning ahead, I will set each word individually as an SVG (the trick is making the height of the viewbox exactly the same and the proportions should match) and load them up with custom JavaScript. I made a little example for you to pick apart. Obviously, it is only to illustrate how flexible the concept it. It is not exactly how I would position things or build a banner. http://codepen.io/dipscom/pen/PPmEWO I know I am using SVG in image tag, it was just an easier way to set this up, the theory should hold if you are using inline SVG as well. Another reason I use the image tag is because is much easier to simply write the array, then modify it. And since I most of the time work with rich media placements, HTTP calls are only a secondary worry.

Hi Jonathan, Thanks for that. Like I said, I was and still am very skeptical of that claim. But while I can't replicate it, I can't know for sure. And you are quite right as to the new API, but, unfortunately, this is for a banner ad and I was instructed to use this old API to my shock an horror. But hey, such is life. Let's leave this as being marked as not a bug.

I dream of the days we will be able to use fonts. Life will be so much rosier then. Oh, wait, it won't. Have you ever opened a design file from a different OS? Have you had the wonderful experience of having a truetype font converted into a opentype or typescript? IT IS THE SAME BLOODY FONT! And yet, never looks the same. Whenever I can, I just play dumb and go on until someone points out the font looks somewhat different. If no one notices, wonderful. Otherewise a load of headaches to make it match. Personally, when converting I will default to SVG as they look so much nicer on high density displays and I can use the same file on all the different sizes. I will only use a PNG if it is absolutely required for whatever reason it might be.

I also work mostly on the entertainment sector - Lots of video integration and expanding formats. For my part, I see the potential to create great interactive ads and would love to do so but I always get shot down because of deadlines and lack of planning. As far as I am concerned, there is very little limiting us on what we can achieve but there needs to be some sort of planning happening beforehand in order to achieve that. To get marketing people up to speed, there is only one way. Show them something that has been done before or they will not bite. Once they do bite, the issue will be convincing the client to cough up the money for it and have the ability to actually share some content that can be used. Normally I get one poster (when working for films, for example) and that's it. We have to create a whole campaign out of that one poster. Which, obviously, gets updated by another poster with a whole new look/feel about three days prior to live date.

I am having feedback from different sources telling me that autoAlpha is not doing its job when working with the YouTube player. I am very skeptical of it but cannot replicate it as the claim is for IE11 on Windows7 and Windows8 - I am on Windows10 and was foolish enough to convert my older laptop into a Linux only box... The codepen is as bare bones as I can possibly make, due to the extra components needed to test this very particular scenario. At the moment I am really just looking to get a confirmation whether this is really happening or not. Anybody out there has a machine with Windows 7 and can verifty this for me? Many thanks.

For self hosted font there is one big non-legal downsize: Your server is not going to handle it. Unless you have a professional dedicated server, of course. It will be hit thousands of times when the ad is served. Legally speaking, if you're not talking about webfonts that are already out on the wild and are royalties free - e.g. Google fonts, you're putting yourself in line for a potential breach of copyright if you don't license it. If you do, it is quite costly. Now, as for converting the font from Illustrator into an SVG, the step you are missing now, somnablst, is to actually convert the text into a curve before doing the copy/paste. Some software will talk to each other and know which font to reach out for on your system (Edge, for example) but, when you go into IE, it's a different can of worms. It does not understands the link that references the font in your system and so, it defaults to whatever it can. So, you can continue using Illustrator for the SVG if you take the extra step to convert the text to outline (or whatever it is called in the program itself), which may, or may not be more conveninent than transparent PNGs.

Funnily enough, it was something we were discussing not long ago. http://greensock.com/forums/topic/12494-question-about-when-css-props-are-set/#entry51978 The official is not known just yet but you have reached the current workaround.

I personally, given the chance, will avoid getting the QA certification at all costs. The last thing I want is to be the one officially responsible to answering to it when the thing (doubleclick) breaks.

Ah Joe, I did forget to mention one crutial detail: This is a YouTube masthead placement. And the YouTube masthead placements, in my experience gets all of the overzealous QA engieneer. Like yourself, up until today, I have had zero issues with the CloudFlare CDN. But today, that happened. So, I thought I would report. Hopefully, Carl's contact will send the memo down to that particular QA department. I mean, just so you have an idea of the level of pickyness - There's a YouTube logo at the bottom left of the creative, that was also a point of rejection in the QA report. The irony of it. That logo was provided by no other than: YouTube.

I know there is a DoubleClick CDN topic but because Google has too many little rules for their different ad platforms, I thought I would make this topic especifically for their Rich Media account as the other CDN topic seem to focus more on their Campaign Manager details. So, carl help us here, please: Like you said, I am getting in touch to let you know DCRM has rejected one of our ads because we linked to GSAP via the CDN you guys provide. For now, the client is getting very twitchy so I am going to drop the library in and reference it locally but if you have a contact at Google and would like to poke them with that, it would be great. And, if they have finally sorted out their own CDN for GASP, could you let me know? Attaching a pic of the rejection report in case it helps you. I had to redact some bits due to client confidentiality.

What is happening you have explained quite well. The .set() is being triggered right at the start of the master timeline. As to why I can only speculate. What I see the reason being is because .set() is a 0 time event, there is nothing to use as a reference point when calculating its position. So, it happens instantly. However, if you tweak your code to have something happen before it or have set happen a second into the timeline, then, there is something to reference and you get the behaviour you were expecting. I didn't fork anything because I am lazy but just add, 0.1 at the end of your .set() and you'll see pretty kitty's eyes. You will have to ask the ALMIGHTIES for a more real reason why it happens. I can only offer what I think is happening. If you multiply anything by zero, you get zero.

I wouldn't call my stuff inspiring but I will pluck some of the work I have done up and place a couple of things here soon(ish). (Time measured in days - not minutes).

Internet Explorer being the wonderful joy that it is, does not play ball like all the other browsers that I test with. So, I was wondering what tricks people had and what behaviour they have noticed when creating the large invisible button for banners in general. Not the acual clicktag itself, just how to make sure it behaves like a button. I use one of two techniques depending on my mood and whether theres need for roll over states. Technique 1: A transparent 1x1 gif, set to 100% width and height. Then, good old javascript to handle the click. HMTL <img src="transparent.gif" id="clicktag" /> CSS #clicktag { width: 100%; height: 100%; cursor: pointer; position: absolute; left: 0; top: 0; } JavaScript document.getElementById("clicktag", onClick); function onClick() { // Relevant code } Technique 2: I write a loop that add the click functionality to all assets (div, images, paragraphs, etc) and the cursor CSS rule. Then, I have the onClick function filter who's been clicked and decide what needs to be done. The reason for that is because I have seen IE not working correctly with a third technique I used - an empty <div> tag, similar to the transparent pixel one. I am still not 100% sure the transparent pixel works because I have not tested enough. But it seems to me that the cursor: pointer CSS does not always work in IE. Does anybody else see this or am I just with a broken copy of this crazy browser?

Can confirm the issue in Safari and also that Diaco's answer fixes the issue.

Hello, welcome! Just to add a semi-pro tip, on top of what Ohem has already answered. If you are Tweening using the id of the object and you know you won't be using the variable anywhere else, you don't even need to refer it as '#idName', you can pass the id name as an object and TweenMax will find it without the need of any other external selector engine (it has its own). So, you can just write idName, without the quotes and without the #. Like this: http://codepen.io/dipscom/pen/zvrWqz

It is the general concensus that GSAP in many of Google's ad platforms are allowed. Google itself even recommend using GSAP as pointed out somewhere in this forums. I have ads served via AdWords that make use of GSAP via CDN, there should be no reason why you should not. Let me go back on that, just went and checked the files I was thinking of and it is not linking to GreenSock via CDN. So, Carl's right and I was horribly wrong by saying thinkgs without checking their veracity first. The crux of the question is the difference between external files and files hosted in CDN. Meaning, there seems to be a disticntion between them and certain libraries in certain CDNs are whitelisted. /* Carl, trigger happy on the keyboard as always - I shall learn to touch type because of you */

WebGL is 3D in the browser. It is <canvas> on steroids. I have dabbed a bit with it on the past. Very keen to work more with it but the opportunity never arrives. ThreeJS and PlayCanvas make very good poster boys for it.

I have no idea, somnamblst, I never know which is which - Other than the help guides for AdWords is on blue background and the ones for DCM on green. How many ad platforms Google owns is beyond me.

I am very happy to hear that the GSAP team is happy to have us ( banner people XD ) here. To me, it is pretty baffling that there isn't a place where you can exchange knowledge about banner workflow but I don't think it is because there are secrets to be kept... Actually, there are secrets to be be kept - one secret - the fact that one makes his living of banner ads. The amount of times my friends and co-workers have giggled and made fun of me for improving my workflow or bothered to read the help files from the ad platforms is quite shocking. In the end, it is cool to be a backend developer. It is cool to be a frontend developer, a digital animator, a digital designer. But say you make banners for a living and you managed to squeeze a transparent png dragon with animated fog and a paralax effect in a 300x600 with a 40kb limit and they'll laugh at you. At least here, I'll be able to go nerdy full throtle and have people actually care. There you go, vent over.

Can we use it to discuss other techniques and problems related to the industry as a whole? I have a question that has ZERO relevance to GSAP but I am yet to find another forum that is focused in the displa ad industry.

Nice one, challenge now is to find the time to go over those things. XD

I feel your pain. Just recently I had an issue myself where the project manager wouldn't do much to help me troubleshoot. She would send me the specs over and over again, ask me to refer to them and review the code because they were unable to upload. The only feedback was a screenshot cropped all the way down to the warning window saying the ad could not be uploaded because it was missing the <meta> tag with the ad size. Believe me I reviewed the code several times and that one tag was definitely in. They wouldn't give me access to the account to troubleshoot so, I created myself one in AdWords, tried to upload, saw a completely different error, fixed it and that was the end of the struggle. In the end the cause was because inside the svgs I was using there were <style> definitions and for some reason, that is not allowed. Might be worth you trying to have an account yourself for troubleshooting.

I have served many a banner with a background way larger than the parent div. Like, twice the size. The problem with yours might be on the file setup. Have you got the meta tag with the correct ad dimensions, for example?

Is this number of files limit a US only thing? I have looked around several times and never seem to find it. For all my digging around in AdWords (Google's standard ad platform as far as I know) I can only find this, and there is no mention of maximum number of files. If anybody has a link to the correct documentation, please share. It's always best to have a link to the official specifications.

How punitive are we talking here? If you're in the realms of the 40kb, get ready for a world of pain... You will probably have to make do with much, much, much simpler animation, use CSS transitions or consider a more limited/lighter library. OR You could (should) push back and explain the pros of using CDN for Greensock, then you can use the whole suite of tools without breaking a sweat and deliver amazing results even with those punitive file restrictions. Have a read here. Specially the bit that it explains about CDNs and why use them.