Google Web Designer, GSAP not loading on published Ad

[mstrhans 10 Likes (Newbie)]

Hello All

 

I'm making an html Ad with Google Web Designer using GSAP. When I run my Preview within Google Web Designer everything loads fine. Im using the window.onload  = function() to start the tweens. But when I publish and create the files ready for placing in the Ad Networks it just displays in the last instant without any animation. As if there is somewhere an init or polite-load waiting for the file to load en then jumps to the last frame.

 

I'm not an expert on JavaScript. I wonder where to activate the tweens within Google Webdesigner Code?

 

Demo and full code;

http://demo.hanspeeters.net/gsap/

 

Would be great if anyone could help, for im lost how to mix the use of GSAP en Google Web Designer.

 

Thank you all for your help in advance

[GreenSock 8,117 Likes (Superhero)]

The errors in the console indicate that you're trying to tween something that doesn't exist. I didn't analyze all your code to find out exactly where you're doing that, but think of it kinda like doing this:

var someTarget; //notice I didn't assign it to anything.
TweenLite.to(someTarget, 1, {x:100}); //wups, someTarget is null...can't tween its properties. 

You could use console.log() right before each tween to see what you're targeting and find which one is null/undefined. 

[mstrhans 10 Likes (Newbie)]

Jack thank for your support i did assign them, but my guess some script from google is catching firts all div's before they are rendered

 

    window.onload = function() {

      var bg = document.getElementById("gwd-image_1");

      var logo = document.getElementById("gwd-image_2");

      var beeld = document.getElementById("gwd-image_3");

      var btn = document.getElementById("gwd-image_4");

      var goed = document.getElementById("goed");

      var accessoires = document.getElementById("accessoires");

      var tekstblok = document.getElementById("tekstblok");

      TweenLite.from(bg, .5, {

        opacity: 0

      });

 

[mstrhans 10 Likes (Newbie)]

I found the solution so GSAP works from within Google Web Designer. Just link the animation to an event like this: Page > Pageload event.

Then the animation will work when Published. I know it was more a Google Webdesigner thing then GSAP. Yet another application of a great solution!

[GreenSock 8,117 Likes (Superhero)]

Great, thanks for letting us know.