Dipscom

I have spent a good part of this afternoon and Friday going over SVG filters and it appears that there is not reliable way at the moment to have it working in the major browsers. Some of it works nicely. Like, creating a drop-shadow. But, try getting a blend effect to work and you're out of luck...

Jack, it does now. I thought the <g> was only moving on the X axis but, it is behaving exactly as you have described, I just could not see it while the animation was looping. I went back and modified the pen a bit to illustrate the different behaviors, with a little overlay of where the 0,0 of the <g> is. Now I can easily see what is happening and makes perfect sense. Thank you, as always, you're spot on. I want to be like you when I grow up.

It certainly stops the quirky behavior. A-M-A-Z-E-I-N-G-G. Also, what you have explained does make some sense on paper. But how it actually behaves in the browser, it doesn't. I would have expected the svg in the <g> tag to have moved to the 0,0 of the coordinate system but if only moves to the 0 on the X position. Anyway, I am glad all I have to do is remember to set the origins before scaling. Thanks, Jake.

Hey there, I have been digging into SVG a bit recently, following some of the posts of people raving all about it. I have a decent understanding of the viewbox and the coordinate system, at the very least to know there are gotchas there. In the pen attached, I have some tests about scaling and the transform origin. It is interesting to see that if I try to scale a <g> tag it will default to the top left of that tag, not the 0,0 of the coordinate system. Also if I set the transform-origin to anything other than the default value, it will - for some reason, break the actual positioning of the <g> but not in a manner I would expect. But the same thing does not happen if I try to scale up a <path> element. I have seen Chris Gannon's SVG banner, haven't taken it completely apart yet and so, I would expect to find something interesting when I do. anybody with some insights as to why this behavior when manipulating the transform origin?

I'm all up for trying to standardised ways to build ads. It makes everybody's job a lot easier if we wall know what we're looking at and we can focus on just the creative bit and animation.

By default, things on a html page are ordered as they are read by the browser, from the top of the code to the bottom. Z-index allows you to break that order (do not ask me how, thought). Think of it as the layer order, the bigger the number the higher up on the stack. The gotcha is that is really only does anything if you position the element absolutely. What I see happening is that you're triggering both the tween and the clicktag, that's happening because you've got the onclick event on the div that contains the text you're clicking but you are not defining if you want the click to be handled on capture or bubble. There's loads of explanations about it around ( I always get confused on how to do that sort of thing as well). You'll need to stop the propagation once you hit the text, that way, you won't trigger the clicktag. I have here a little button object that I use on my ads. I just added a bit that stops the propagation of the click (it was something I was bound to do, at some point, anyway). Click on the text of the third box from the top, and click on the box itself. The boxes at the very top will tell you who you have clicked and hovered.

Well, if that's the case. Assuming you have a clicktag with a working url, you won't be able to drop just a file into a DIV and magic happens. You will have to either work with the administrator of this site to have an iframe call your files. Or you will have to get him to put the links to GSAP on the header of the page the ad will be served. Your CSS and JS can all be inline inside the DIV where the placement is meant to go. But, honestly, that sounds like a very bad way to do it. It will never be as simple as dropping a single file (swf, gif, jpg). You will have to negotiate and coordinate with the site admin how to handle it.

Would it be via an ad serving platform or will the site serve the banners themselves? Via the ad serving platform, you will be given a tag to add to the ad's location, nothing more. If the site is serving the ad themselves, there's numerous ways. From simply placing the code directly into the page to building your own ad serving platform. Generally, the way a ad is placed on a page is via iFrames. The nits and bolts of it depends on how the site decides to handle the serving.

I'll echo what OSUBlake has said about having a function called more than once. It could be a combination of your assets not being loaded on time before the animation starts and/or being re-set as you're playing them. You might want to have your timeline paused (if it isn't already) and not instantiated until all data from the feed has finished downloading. One gotcha is always the .set method. It is a zero second tween and if you start a timeline with it, without having a tiny-winny delay on it (0.01, or the like), it might produce undesired behaviour. We are all shooting in the dark here, as GreenSock said, the best way is to have something we can look at that replicates the behaviour.

You were on a roll OSUblake. Thanks for the encouragement. I do have a little library already. I have even a task runner set up with GulpJS. It does wonders for me. It is not bullet proof yet and so, I don't go around showing people. I haven't even found the time to work on it in the past month or two. That just makes me wonder how little the likes of you, Jonathan, Diaco, Carl and Jake sleep... Really interesting trick that you showed, will have to digest it a bit better to see if I can make it work with this workflow I describe in the article above. I say the reason I ended up using objects is because of my ignorance of what cannot be done and so, I just try it. Also, what I have seen around the (banner) industry is more a case of the client telling people they cannot use certain technologies because they're going to send it to people who don't know how to code to create variations and translations... Now, closures... That's something apparently simple that I have yet to master. Be certain I will be looking into your demos and taking them apart to distil everything I can from them. It all of that does indeed help me. Pixi is also on my list and getting back into Canvas and WebGL. It is just too much I want to dive in at the moment. Oh dear...

I hope the same. "I have a dream... That one day we will all share code. We will all share workflows and we will no longer spend a day just trawling through someone's code trying to make sense of whatever madness has possessed that previous developer".

Do you have any idea if that is also valid for AdWords, Jack?

Dear mr. Almighty Code-God Who Answers by GreenSock, My eyes burn with the vision of you addressing me personally and my soul is elevated into nirvana for receiving advice from your goddiness. Yes, I do forget that detail more often than not. The timeline creation code only runs once. I will return to the dark depths of shame now and brood about it.

I am not fluent in IQuery so, what is the bit that you want to replace? This? var star = $('<div class="star ' + size + 'Star"/>').appendTo(sky); What is it exactly that you are trying to achieve? Write the name of a class and create the element in one go? Or does this element already exists and you just want to rename?

How about having a loop variable and a if statement? var loop = 0; var tl = new TimelineMax({repeat:3, onComplete:count}); tl.from($(".text1"), 0.5, {alpha:0})); tl.to($(".text1"), 0.5, {alpha:0}),"+=2.5"); tl.from($(".text2"), 0.5, {alpha:0}) ); tl.to($(".text2"), 0.5, {alpha:0}),"+=2.5" ); tl.from($(".tele"), 0.5, {alpha:0}) ); tl.to($(".tele"), 0.5, {alpha:0}),"+=2" ); tl.from($(".endframe_logos"), 0.5, {alpha:0}) ); if(loop < 2) { tl.to($(".endframe_logos"), 0.5, {alpha:0}),"+=4" ); } function count() { loop++; }

Soooooo, I have been meaning to start writing down my workflow in order to fine tune my workflow and put together a portfolio. The portfolio thing is just not happening at the moment. Too much work even without a portfolio. So, I am planning to start collecting my ideas and workflows in CodePen and eventually turn that into my portfolio. I have now written a little article on something I stumbled upon a couple of months ago and have been itching to share with people to see who else knows about it and uses Objects as targets for Tweens. Also, I have never been a writer and this is pretty much the first time I ever write something that is going public so, hints and suggestions are welcome. Enjoy! http://codepen.io/dipscom/post/conditional-animations-with-greensock-and-objects

It is my understanding that: No. There is not any particular benefit for us or the end users to use Sizmek's CDN over GSAP's. Having said that, for Sizmek (and any other ad platform) there is a very big difference. Security and control. With their CDN, they can make sure that their level of security is up to their standard and what is there is what is said to be there.

It seems there are a few of those online tools poping up nowadays. Competition is always a good thing, it forces the bad out and encourages innovation. At the end of the day, they are just tools, different people work better with different tools. I did notice one thing on your examples and wondered if it is a glitch or is expected behaviour. None of the banners I looked at animated until I had the mouse over it. They seemed to start at the endcard and would abruptly stop any animation if I hover out and hover back in. Is that how publishers expect banners to behave? I know there is a big ho-ha here in the UK, I imagine all over the web these days, about ad blocking and people trying to advocate for a middle ground as the sites need the advertisement but also, the user deserves a level of privacy and not to be bombarded with ads as some places do.

Allow me to butt in a bit. I am curious as to why there is so much repetition in your code. Even in this timeline version that you have shown now, there is a bit of refactoring that could be done and it should give you the same results. Like this: /* You can remove the var declaration and chain the variables with commas if you would like. It's personal choice */ var i = 0, a = 1, d = 1.3, t = .1, t2 = .2, o = 1.2; var tl = new TimelineMax({paused:true, onComplete:startVideo}); /* Put your elements in arrays of logical chunks */ var arrayText1 = ['#exp_txt1', '#exp_txt2', '#exp_txt3', '#exp_txt4', '#exp_txt5', '#exp_txt6']; var arrayText2 = ['#exp_txt2_1', '#exp_txt2_2', '#exp_txt2_3', '#exp_txt2_4', '#exp_txt2_5']; var arrayOne = ['#exp_join','#videoContent', '#exp_us']; var arrayTwo = ['#dc_logo','#bar','#logo']; /* I see no reason to use a .to tween of 0 duration. That's effectively a .set tween The tween methods will take an array and interate thru all the elements, you can even call some array-specific methods inside the tween, check the bellow */ tl.set(arrayText1.concat(arrayText2,arrayOne), {alpha:i}) .set(arrayTwo, {alpha:a}) .set('#bar', {width:0}) /* Use .staggerTo or from for this sort of repeating code Your original arrayText1 has not been modified, so you should be able to use it here as originally intended */ .staggerTo(arrayText1, t, {alpha:a}, "+=.2"+t, "+=.2") /* I don't know why you have a absolute time positioning here if you are using variables for lenght of the tweens. I personally would use relative time positioning in this case */ .staggerTo(arrayText1, t2, {alpha:i}, t2, "+=2.3") /* More of the same. This is where building this timeline using functions would be useful, because you are repeating what you have just done */ .staggerTo(arrayText2, t, {alpha:a}, "+=.2"+t, "+=.2") /* Same comment as above. Depending on the effect you are after, you could even simplify the above and bellow lines into a single one using repeat:1, yoyo:true and repeatDelay options */ .staggerTo(arrayText1, t2, {alpha:i}, t2, "+=2.3") /* A little more refactoring of your code */ .staggerTo(['#exp_join','#exp_us'], t, {alpha:a}, "+=.2") .to('#bar', .5, {width:82}, "-=.2") .staggerTo(['#exp_join','#exp_us','#bar','#logo'], t2, {alpha:i}, t2, "+=3") .to('#dc_logo', t, {alpha:i}, "+=2") .to('#videoContent', t, {alpha:a}, "-="+t); I can't guarantee it will work out of the box as I have nothing to test it against and I cannot be sure of what result you were after but, this is the logic I read inside your timeline. Ultimately, the less code you write, the better code you write - Less prone to error and easier to maintain/amend. Also, make sure you name your variables something more meaningful than single letters. Someone, somewhere, someday, might have to read you code and I am sure he/she will not be your best mate ever again if you only use single letters as variable names...

Really nice, read thru the slides. It seem it was a nice introduction and starting point. I wasn't aware of this seminar but I guess, since I am already a converted, do not need more incentive. Your words would be wasted on me. The great bit, in my opinion, is this drive you guys are spearheading to have some standards that make use of the latest technologies. Keep up the good work and let us know what else we can to do assist.

Hey Jonathan, Apologies for the long sinlence. Been away (I am still away, actually, just had a bit of time to come to the forums) for a while. I, like many of us, test in as many versions of IE as possible. The version I have installed is the latest one as far as I am concerned. Haven't looked at Edge yet, might also be worth doing so... IE8 is, of course, ignored. I am part of the selected few who can just say no to it and refuse to provide support. Now, the trick is the sort of thing I like for this sort of situation. Definetly will be using that instead of the empty gif. Thank you for that.

Another thing you might want to check is if the SVG uses <style> tags. That will definetly throw an error in AdWords (don't know about DCM, but would hazard a guess they're pretty similar). URLs references inside the SVG also tend to cause headaches, like, when you are masking.

The elephant in the room question to ask is: are you including Greensock in your Sizmek workspace or are you referring to it via CDN? And if is CDN, did you use the https option? I once was caught on that, because the default cloudflare CDN address was http, not https.

Hi devotee007, Do you think you could make a simple example that we can see what is going wrong? Carl has a post explaining how to make a codepen demo. But, in any case, you might want to choose if you want an infinite timeline repeat new TimelineMax({repeat:-1}) or a repeat onComplete of your last tween .to(".txt2Wrapper", .3, {alpha:0, onComplete:restart, onCompleteParams:["txt1Wrapper"]}, 5).

That is indeed an interesting read. I will have to go back to it and re-read it a couple more times to digest the whole idea. The invisible button is to trigger the clicktag. On standard ads, you only have one clicktag (one destination url), on rich media (or enhanced banners) you can have multiple clicktags. By default your clicktag should be at least 75% of your ad size - I always make the default (aka, invisible button) 100% and place any other buttons on top of it using z-index. Because ad publishers will always have you trigger a JS function anyway, there is not much pressure/need to consider the scenario where the user has JavaScript disabled. As far as I know, no JS, no ad so, no worries. Also, because of that, you will always want to handle the click using JavaScript anyway so you can hook up all sorts of other behaviour with that. Like, stop any sound/video, jump to the endframe, fire a counter, etc. In any case, that's an interesting tip I will be looking into (along a million other things I have in my to-look-into list). Thanks OSUBlake.