Jump to content
Search Community

Google Web Designer, GSAP not loading on published Ad

mstrhans test
Moderator Tag

Recommended Posts

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


Link to comment
Share on other sites

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. 

Link to comment
Share on other sites


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

      });

 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...