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. Hi StacyGray! Welcome to the forums! And to the dark arts of banner development. Every one of us here has sold his/her soul in order to gain knowledge. Are you prepared? Seriously now... I personally have not got much experience working directly with DCM. I work mostly with DoubleClick Studio and sometimes AdWords. But, from reading what others say about DCM, it is the same as AdWords so, here are my two cents: The reason all of your clicks are going to the same url is because you are calling the window.open(); method wand passing the exact same parameter clickTag. In order to call different URLs you need to pass different parameters when calling the window.open();. Try instead of: <a href="javascript:window.open(clickTag)" target="_blank"> <div id="click_btn"></div> <div id="click_btn1"></div> </a> Do something like this: <div id="click_btn" onclick="window.open(clickTag);"></div> <div id="click_btn1" onclick="window.open(clickTag2);"></div> But really you should have your JavaScript logic outside your HTML: HTML: <div id="click_btn" ></div> <div id="click_btn1"></div> JavaScript: document.getElementById("click_btn").addEventListener("click", bgExitHandler, false); document.getElementById("click_btn1").addEventListener("click", bgExitHandler, false); function bgExitHandler(e) { switch (e.currentTarget.id) { case "click_btn" : window.open(clickTag); break; case "click_btn1" : window.open(clickTag2); break; } }
  2. Hi tyelrx, I have not read all of your code carefully, there is a load there but, focusing only on the movement of the mask. You seem to be overcomplicating it there and got the y's confused. If you want the mask to come from the bottom to the top (keeping the gradient effect) you want to tween the y1 from 100%, you shouldn't really need the fromTo(). Check this out: http://codepen.io/dipscom/pen/KVVGLv?editors=101 Little comment on the side: The many other timelines, why do you need so many? I didn't really see much moving other than the bubbles. Happy Tweening!
  3. I would put money in them having some inside information. Decisions like those are not, generally, made overnight. There would be a ton of negotiation and consideration prior to any action.
  4. Harsh Blake... BUT you vindicated me with your own words. And... Could someone enlighten me, what does SMH stands for? I need to figure out if I am being offended or complimented here.
  5. Just coming across this. Erm... Wow? On the CSS transition thingy: There is time and place for each. I do agree with not being great to sequence with. Third point, how's that I am being lumped with the lot that knows their stuff? Flattered but, all I do is talk a lot. Not quite there in the answering correctly yet.
  6. Dipscom

    Show and Tell

    Thank you OneManLaptop. I have more I want to do with it but at the moment, my internet is just not playing ball. Been for the past four hours trying to do some shape morphing but not much success. For some reason my broadband provider is just not delivering today. Editing code in an online code editor when your internet is at, what is feels, dial up speed is even worse than no internet at all. At least I would go out and do something else. I'm giving up for now. Whatever shape it is (it doesn't even load for me at the moment). Tomorrow I am gone on holiday so, hopefully, by the time I am back, the internet has decided to behave.
  7. Dipscom

    Show and Tell

    Since I am a nobody in the world-wide-web-world and pretty rubbish at social media, I thought I would come here a post some of my experiments and little animations. Bellow is a little animation I have made based on an animated gif a friend of mine made of himself - he's an illustrator. I am quite happy with how it is coming out simply because it is giving me the opportunity to put a lot of things I learn here into practice in a way I would not manage at work. It is pretty much there, I am working on the mouth right at this very moment - it will use the MorphSVG plugin. I also have a few more things I want to add in the future, like different outfits, moves and accessories but I reckon, if I wait until it is done, I will never finish. Thanks peeps! ( yes, I am fishing for comments and views! )
  8. Hi fernandofas, I am a bit confused as to what your struggle is. Your animation is already looping. If all you want is for it to loop three times, just change: var tl1 = new TimelineMax({repeat: -1, repeatDelay:1}); to var tl1 = new TimelineMax({repeat: 2, repeatDelay:1}); Also, a pet peeve of mine: When you say: "I want to loop the animations 3 times from start to finish" - you mean: "I want to play the animations 3 times from start to finish", right? Because if you say "loop 3 times", the animation will play 4 times.
  9. Hi, I have just done a bit of bug hunting for you. The error actually tells you exactly what it does not like: the <script> tag inside your SVG. Once I removed all the <script> tags in there, the ad does upload. I have read Chris Gannon's post but have not taken the time to test it out to see which platforms like it and the ones who don't. Clearly, AdWords is a no-no. So, here is my suggestion: Get your SVG and have it inline in the HTML, rather than as an <object>. Put your JavaScript in a separate .js file and reference it from the html <header> normally as well as TweenMax. The attached is your file with the setup I just mentioned. It uploads to AdWords without errors. But the JavaScript is broken - I am sorry but you will have to go over your code and adjust the code to reflect the new setup. IDSYS_a300x250.zip
  10. Hi darko, Welcome to the forums! The best way to troubleshoot your issues is to have a reduced case example that people can examine. Carl has made a really useful post on how to use codePen just for that. I am not sure exactly what you are doing wrong and am not that much of an expert to know what might be wrong from the top of my head but here are some things I can say: If you are Tweening more than one element, they should be inside an array and separated by commas: TweenMax.from([".letter_O", ".letter_o"], 1, {delay:1, rotation:22.5}); If you are using staggerFrom, you should provide an array, not a single element: TweenMax.staggerFrom([item, item, item, item, item], 0.5, {opacity:0, delay:2, cycle:{y:[-200, 200], rotation:[-180, 180]}}, 0.2); If you are going to sequence something, it will be probably much better to use TimelineLite or TimelineMax. Not delays and TweenMax/Lite. Your rotation issue, probably comes from where the transform-origin point is. Maybe this will help. You can pause an timeline and have it wait until the onload event fires or anything else. But since your problem seems to be that you get to see an ordinary "O", why don't you have it all hidden by default and only after everything has completed loading you animate all in? // style.css .explodedLogo.letter_O, .explodedLogo.letter_o { visibility: hidden; } // scripts.js window.onload = function() { var tl = new TimelineLite({paused:true}); tl.to([".letter_O", "letter_o"], 0.3, {autoAlpha:1}) // more code tl.play } Hope this helps.
  11. There you go Kathryn, the man himself. I say, if we wish upon a star hard enough, Carl might sweep down and grant us an extra pro tip and if we really mean it, we might even get the honour of being burned by the shinning radiance of the CODE-GOD Greensock in his holy digital form.
  12. I had a quick look at you pen, the console throws a few errors. There is one where it complains you are trying to tween a null object. If what you are after is a switch toggle, check out OSUblake's answer on this other thread. This is what I understood you are after.
  13. For AdWords you have to include GSAP inside the zip folder you are submitting. Not reference if via CDN.
  14. I see. Very nice little trick. You can be sure it shall be used in the first opportunity.
  15. Thanks Blake, Very nice tips. I do try to make my workflow as modular as possible but it is not always possible. There is still al lot of people in the banner development world that is only used to work with Flash's timeline so, there is only so much you can do before people don't know what you have done. I do hope that as we go along and share ideas/tips/workflows, we get to work in a similar manner and make each other's life a lot easier. Pyramidum and Joe's BannerTime is a nice approach that I hope will catch on (although I still need to sit down myself and have a play with it, and I have my own automated task runner.).
  16. What I did not get was where the `animate` was coming from. Now I kind of understand but my head hurts when I start to think I actually get it. Which, is good because it means I am learning something I don't know. Going back to the Greensock side of this, then. Does it mean that on each click, the code loops thru every single one of the tweens, only the one that was clicked plays? Like, every tween is triggered but we only see one move because the others do not get reversed?
  17. OSUblake, I'm interested in this bit here: // Cycle through list of animations, toggling reversed state animations.each(function(i, animate) { animate(event.target); }); I see you wrote using Babel and I am guessing this bit is just a newer way of declaring a function and calling it immediately. Is that right?
  18. I guess if I am going to spam a self promotion I might as well do it on a thread I started and is about me writing stuff. Not sure if/how often I will be writing but it certainly helps to digest ideas and concepts. <spoiler> **shameless plug** </spoiler> http://codepen.io/dipscom/post/setting-up-adaptable-banners
  19. Hey guys, I thought I would bump this up and add the following: https://support.sizmek.com/hc/en-us/articles/206136366--reference-glossary-HTML5-Shared-Libraries Sizmek now has an official list of external libraries and their respective CDN links.
  20. Great how this thread has been completely hijacked with many various side conversations... Hope that jwave got the answer he was looking for. Shame my prediction was not accurate enough. I should have remembered the Jonathan lurks around here more or less in the same timezone I do. But not really sure what is his timezone. He seems to be here 20 out of 24 hours each day.
  21. Hey, jwave! As you might have noticed, there has been no downtime here so far. But if you want to dive in yourself, there is another thread that touched in this subject, you might want to check that out.
  22. Carl, what do you think about putting jp_gsap_0324's answer in the Sizmek CDN thread and pinning it? It would make it easier for people to spot and grab the urls. I find myself coming here to grab the CDN links for both Sizmek and DoubleClick.
  23. What I think he is after, guys, is the old ball bounce effect. I'll get a pen to show if I manage some downtime today. Hopefully, I will get some digital street cred here for being able to spot the answer, even though, I have a feeling that by the time I am done writing this, someone will have a pen with three examples (Blake, most probably or Diaco)
  24. Hi friendlygiraffe, The two things are not related. Local or session storage would be if you were trying to save something into the user's computer. Like, when you have a game and give them the option for the user to save his/her progress. Or an Ad that would save whether the user has seen it or not and present different/alternative content depending on it. GSAP is an external library. I never know which one of the different heads of Google's Hydra Monster Presence but you should have your GSAP references to their CDN, unless it is going into AdWords. Check the bellow out: http://greensock.com/forums/topic/12701-google-doubleclick-hosts-gsap-on-their-cdn/
  25. My case is more that I just don't spend the time to put a portfolio together. The NDA is implicit when the work is being carried on, no client wants their campaign leaking into online forums before it is official, you know. After that, it is generally ok (in my case the laziness plays a big part as a deterrent).