[SSL compliance]

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.

[object falling diagonally with bounce easing in correct direction?]

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)

[DCM (Doubleclick Campiagn Manager)]

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/

[Best Place to View HTML5 Banner Portfolios]

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).

["Malformed assets"]

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?

[run at end of animation]

Add this to your tween: onComplete: functionName

[Looping animation]

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.

[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.

[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.

[Please help me fix this code]

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.

[Calling TimelineLite on hover via function]

Is this what you're after?

 

See the Pen avROPp by dipscom (@dipscom) on CodePen

[Google Web Designer app -- Anyone use it?]

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.

[Is jQuery ever necessary for ad display banners?]

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

[Understanding the .from() behavior]

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...?

[Tweenlite infinite rotate with increase/decrease speed option]

You guys....

[Understanding the .from() behavior]

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

[Tweenlite infinite rotate with increase/decrease speed option]

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/

[Understanding the .from() behavior]

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!

See the Pen dYqzwX by dipscom (@dipscom) on CodePen

[Morph SVG help]

@letssock, what did I say about it being answered?

[Dynamic Sprite sheets with Sizmek]

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.

[Dynamic Sprite sheets with Sizmek]

 

OSUblake beat me to it... I was going to refer the same two links that he already probably knows by heart.

[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.

 

[Dynamic Sprite sheets with Sizmek]

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();
}

[Displacement mapping]

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.

 

[Displacement mapping]

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

See the Pen wKXZYE by dipscom (@dipscom) on CodePen

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.