Jump to content

Dipscom last won the day on July 19 2019

Dipscom had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Dipscom

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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...
  7. 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".
  8. Do you have any idea if that is also valid for AdWords, Jack?
  9. 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.
  10. 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?
  11. 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++; }
  12. 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
  13. 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.
  14. 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.
  15. 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...
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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).
  21. 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.
  22. 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.
  23. 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.
  24. 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.
  25. 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.