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 azuki, Any chance of you posting some code at all? As you might appreciate, trying to imagine what _could_ be the malformed asset without anything to go on will be pretty hard. If you strip out anything that you are not allowed to show and showed, would make a world of difference. If the SVG is exactly what you cannot show, how about making another one that you could share, checking to see if the error happens again and showing that one?
  2. Add this to your tween: onComplete: functionName
  3. Hi Fernando, Well done on your demo. Is there anything in particular that you are after when you ask how to make it better? To me, that's nice enough as it is. Code is ok, there is no need to go into more complex setup for a banner like that. So, I would say, you're on the money on that one.
  4. Dipscom

    GSAP in Celtra

    Good luck Marc. I did have a chat with them back in the day. But they were a bit worried about enabling it as it would, in their view, open a pandora box of potential issues.
  5. Dipscom

    GSAP in Celtra

    Hey, I have used Celtra in the past. I am not sure what their current policy is but at least last year they did not support it. They do not really prevent you from using it in their platform but it is a bit of a convoluted way to get it running. I don't actually remember if there was a workaround at the time. If my memory does not fail me, you will have to build your ad inside their iFrame component, have it call GSAP from there. The drawback, at the time, was that you could not access anything that was outside the iFrame, any of their components or responsive tools. Hopefully, they have changed their position but, back then, their response was that they were not planning in supporting any external libraries because of the cost of testing in all their supported devices.
  6. Hey, Just butting in. I did see a funky behavior on Firefox when testing on a Mac. I did not have the time to look into it but, might be platform specific. I'll see if the missus will lend me her Mac over the weekend and have a tinker. No promises, though.
  7. Is this what you're after? http://codepen.io/dipscom/pen/avROPp
  8. There's a rather long topic going over the differences of going from full on hand code to full on application based and everything in between. As to your specific question: There's all sorts of devs here. I would say, from reading the forums, that every single shade of skill/preference/experience is here. I, personally, do write all the code myself. No libraries except GSAP and whatever the Ad Platform demands. The rest is vanilla JS.
  9. You will be using normal (vanilla) JavaScript for interactivity. There is a bunch of things you can achieve without really needing jQuery. As OSUblake pointed out a couple of times, you might want to refer to the bellow link for some handy snippets: www.youmightnotneedjquery.com
  10. Quite a bit of action while I made my way home today, which involved avoiding a rather large protest, no buses and a heavy laptop bag on my shoulders. Jack, you got the question right. And did a great job of explaining the ins and outs of it. I even gleamed some extra information from the other things you have said. Thank you. Carl, what can I say? Well, I can say I don't believe you made a video because of this question. I also can say I am basking in the rays of knowledge shinning green. Blake, there are a lot of things that mess with my head. But I can see what you're pointing out. That is one thing I am trying to make sure I can visualize. There have been plenty of instances where I have to create one massive timeline with dozens and dozens of lines to get the effect I need and a lot of times it comes with massive headaches. Being able to understand how it behaves is crucial to me as you might appreciate. All in all, guys, thank you. It did answer my question. The dilemma now is to mark as answered by the GOD or the DEMIGOD...?
  11. What you have proven, OSUblake, is that I had a rather wrong understanding of how GSAP calculates the Tweens. I did imagine it would read the initial values, move on to the next line, calculate it, move on, and so on. But still, something eludes me. Because, it appears that GSAP reads the current value of the element, stores it and move on. And so, if I am tweening from 0 all the way into 1. I though, if I called the .from() method again, it would have 1 as the initial value once more, therefore, tweening for 0 again all the way to 1. That does not happen. Looking at the console and the logs you have provided, it seems to me that GSAP sets the property as the tween is calculated, moves on but does not actually tweens the element. Only at the end of the completed construction of the timeline is that the actual tweening takes place. Makes a bit of sense when looking at it for the fifth time today but still feels like the tweening is being calculated backwards in terms of their positioning. * Jack, just saw that you have given an in depth reply as well. Will get read it later on. Got to go back and do some work right now
  12. There was a discussion that is somewhat similar to what you're after. See if the answers there can help you out: http://greensock.com/forums/topic/12318-gradual-stopping-of-repeating-animation/
  13. I did try to find a discussion about it in the forums but, I guess because I just want to know WHY, oh WHY, it behaves like that, people don't ask much. Again, I kind of guess what GSAP is doing and can accept it as an expected behaviour. It is just nice to be able to understand the workings of it. The case is the following: I was trying to use a .staggerFrom() twice, one after another. And, as one would suppose, it does not work. The reason being, I believe, is that GSAP reads the properties on the timeline creation but once the second .from gets called, it gets rather confused as to what is the initial properties of the element being tweened. In the codePen example it would be opacity:1 (working with autoAlpha). But, in my head, the logic would still stand if I were to run the .staggerFrom() without setting the autoAlpha:0. Unfortunately, computer says no (sorry world, it is a british pun). Computer also says no if I do set autoAlpha:0 before calling the .staggerFrom(). Obviously, I do know how to get around this, as you will see on the codePen. It is just that I NEED TO KNOW WHY! So, Mr. Code-god who answers by GreenSock, I beg, descend down to these lowly levels and shine a speck of thy knowledge upon ickle me. May I not be burned by your radiance. And, anybody else who knows anything about it is always welcome. Thanks chaps!
  14. Dipscom

    Morph SVG help

    @letssock, what did I say about it being answered?
  15. Ah! Something I can comment on with certain degree of confidence. Rich ads will always wait until the page has loaded before firing their events. I am not 100% sure about the adkit.js behaviour, I generally do not use templates and am used to working with the EBLoader.js There should be no need to wait for DOM and window if you are already waiting for the .onready() from adkit.js. If I were to build this ad in the Sizmek platform, I would add an event listener for the PAGE_LOAD that is fired by the EBLoader object.
  16. OSUblake beat me to it... I was going to refer the same two links that he already probably knows by heart.
  17. Dipscom

    Morph SVG help

    Well, well, well... Look who is here... I have ZERO experience with the MorphSVG plugin but would like to get into it. Saying that, I am sure that, by the time I get around to even reading the info about the plugin, half a dozen answers will be here. I would say, just to be safe, that you are missing a semi-colon, next to the "gotoAndPlay" line. Right, Brock.
  18. Do you have any particular reason to be loading jQuery at all? I, personally, only use vanilla JavaScript for this sort of thing. And would imagine if you simply load the image up and wait for the onload event to fired, you will achieve what you're after. If JQuery has a way to detect (I imagine it does) the loading of the images, you just need to listen for it before calling the animation function. Otherwise, the code bellow is in addition to what you have set up. Mind you, I would move all of this JS to the end of the page, before the </body> and after the other two <script> tags. I have not tested it as I have no personal access to Sizmek's platform but it really should work. You only need Sizmek's API to grab the reference of the file. The loading of it, you can do yourself. // Create an object to handle the loading of the images var ImageLoader = function(dbug) { "use strict"; if(dbug) console.log("[IMAGE_LOADER] Init"); // Total count of images to load var count = 0; this.loadImage = function(parent, names) { // Grab the html tag based on the string provided var container = document.getElementById(parent); // Loop thru the array provided for( var i = 0, ttl = names.length; i < ttl; i++ ) { // And append the image created into the html tag given container.appendChild(createImage(names[i], extension)); } }; function createImage(name, extension) { if(dbug) console.log("[IMAGE_LOADER] Image " + name); // Add one to the count of images loading count++; // Create the element tag var image = document.createElement("img"); image.src = name + extension; image.id = name; image.onload = countReady; return image; } function countReady() { // Once loaded // Subtract one from the count of images loading count--; // When the count reaches zero if( count === 0 ) { // All images have loaded // Create the event to dispatch the news var event = document.createEvent('Event'); event.initEvent("IMAGES_LOADED", true, false); window.dispatchEvent(event); } } }; function handleSVData(data) { supportImg = adkit.getSVData("supportKey"); venue = adkit.getSVData("venueKey"); dayOf = adkit.getSVData("dayOfKey"); ctaDay = adkit.getSVData("ctaDayKey"); logoImg = adkit.getSVData("logoKey"); placeScript = adkit.getSVData("placeScriptKey"); // Instatiate the image loader var ldr = new ImageLoader(true); // The true is just for the sake of you seeing the traces, delete it when not needed // Listen for the loading completion window.addEventListener("IMAGES_LOADED", imagesLoaded); // Load your images ldr.loadImage("ad", [supportImg, logoKey]); // Give your main <div> an id name of "ad" so it can be found by the getElementById } function imagesLoaded() { console.log("All images loaded"); playAnimation(); }
  19. Hi Jonathan, My apologies, the pen is rather misleading. I am not trying to animate the filter itself at all, right now I am struggling to get the feBlend to work - and because it is NOT GSAP related, I didn't come crying for help here (saying that, I should dive into stackoverflow to see what people say there). The animation I will add once I get the feBlend to work is for the <g> group. And that will be a completely different ball game. That, as far as I know, works absolutely fine and Jack helped me out on that one already.
  20. OSUblake, good links for stuff that works? I was mostly reading in the w3 page and a couple of other tutorials (1) (2) I did make a little pen to test stuff but I cannot for the life of me get the blend mode working. I will eventually get back into it and try again, right now a bit burned out on this. Hopefully, I am just being thick at the moment. As Jonathan said, and I am aware of, filters are supported on the current version of all major browsers, it is probably just a case of finding their particular kinks.
  21. 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...
  22. 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.
  23. 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.
  24. 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?