cbg

Loading GSAP after JavaScript dynamically generated elements have loaded

Recommended Posts

Hello, I'm trying to create a banner with GSAP and a DoubleClick dynamic feed.

 

Basically dynamic content is pulled into my banner via JavaScript. In order to animate the content I need to wait until the content has been inserted first. This is because I'm animating the heights of DIVs that contain content and if I don't wait until the content has been inserted the heights will be wrong.

 

I've tried various things like document ready and window onload but it doesn't seem to be working.

 

The CodePen I have attached is the closest I've gotten but the issue is, now that I've reordered the code the GSAP animation no longer plays automatically.

 

Could somebody help me please?

 

https://codepen.io/cbg/pen/pqjbmx

 

Share this post


Link to post
Share on other sites

Dynamic content including images and live text is stored in a Google sheet. Naturally, you'll need a Google account with access to Studio. Your best bet is to follow Google's docs to properly code your ad: https://support.google.com/richmedia/answer/3526354?hl=en

 

You can also contact Google to get help with their API. You can upload code to them and in some case they write large sections of code for you.

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for taking the time to respond ExplorerZip but that doesn’t really answer my question. I’ve launched many ads via DoubleClick studio with dynamic feeds so I’m aware of how that all works.

 

My issue is more with how I can the Codepen included so that it plays automatically. As mentioned, I have reordered the code so that GSAP now takes into account the sizes of the dynamic elements correctly but the animation no longer starts automatically.

 

thanks.

Share this post


Link to post
Share on other sites

It seems that moving the JS library links to the bottom of the <body> tag instead of the <head> fixes your problem. 

 

I also wrapped the animation in a function when I was troubleshooting, but it seems fine even without doing that.

 

 

  • Like 1

Share this post


Link to post
Share on other sites

Hi ohm. That is how I originally had it setup but unfortunately, as mentioned in the original post, when the code is in that order the heights are being calculated differently. For example, compare the distance between the 'dates would go right here' text and the 'book now' button between your version and my version, you can see on your version it is much closer because the animations are being calculated before the content exists. Do you see what I mean? Thanks.

 

comparison.gif

Share this post


Link to post
Share on other sites

I think it isn't playing automatically on my Codepen because the DoubleClick code is executed on window.load however my GSAP is being executed before perhaps? Does that help anyone as a clue? Thank you.

Share this post


Link to post
Share on other sites

Hi @cbg,

 

The height of cta is 53 px.
Thus, liveContent should have a distance from the bottom of 53px (line 52) !?!

A typo ???

 

Best regards

Mikel

 

 

Share this post


Link to post
Share on other sites

Thanks @mikel but that wasn't the problem.

 

I've just been tinkering with it some more this afternoon and found the issue, one of those silly ones! Basically when I remove GSDevTools (the playhead scrubber tool that lets you scrub through the ad) it works absolutely fine. GSDevTools just obviously wasn't playing ball with the new order.

 

Thats a few hours I'll never get back!

 

Thanks for all of your suggestions everyone.

Share this post


Link to post
Share on other sites

I know you've figured out the issue, but you might also consider putting your JS code in a separate file instead of within the HTML. Then call your external JS in a script tag at the bottom of your HTML before </body>.

 

I've done this for years and it works perfectly fine with DoubleClick Studio and standard banners. Other ad platforms like Sizmek, AdGear should allow you to call external JS files too. Double check their docs obviously.

Share this post


Link to post
Share on other sites

Thanks @explorerzip, I usually do but it just ended up inline while I was debugging this one, will use it externally in future if it works.

 

Cheers!

  • Like 1

Share this post


Link to post
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.