jQuery and/or Greensock GSAP Animation Support

[themandoz]

Hello:

Does MRAID, or better yet, the MRAID Web Tester support 3rd party JavaScript libraries?  I'm trying to add some animation and movement within my MRAID ad unit, but it seems no matter where the code is placed, the Web Tester seems to ignore it, or it causes the ad unit not to load properly.  The animated behaviors work just fine if implemented in a none MRAID HTML page and outside the MRAID Web Tester.  The static layout of the MRAID ad unit I'm working on appears and behaves just fine.  It is only when I try to animate buttons or other objects with jQuery or Greensock that I seem to run into problems.

If any of you have had success in implementing animation within your MRAID ad unit, please advise where I should place my focus.

Thanks!

[Frank Shepard]

Hello,

We've recently made some updates to the way the webtester loads scripts that might be causing issues with third-party libraries. To test if this is the case, try calling your jQuery or Greensock ready function from a setTimeout with duration of 0, e.g., 

setTimeout(function () { $(function () { alert('jQuery loaded'); /* init code here */ }); }, 0);

Let me know if this makes a difference.

Best,

Frank

[themandoz]

Hi Frank:

Although the alert is being triggered in the correct place with the code provided, neither example of the jQuery or Greensock animation I have scripted is working.  It seems as if the MRAID Web Tester is ignoring the animation parts of the script.  The best it will do is either turn the object on or off without any tween animation within the sequenced duration provided.  I wonder if anyone else in this community has had success with animation in the MRAID Web Tester tool.

Thanks,

Andrew

[Frank Shepard]

Andrew,

There isn't any explicit blocking of 3rd-party libraries in the web tester, so it should be possible to get your ad to run as intended. Would you be able to provide a simplified test case? Perhaps an ad unit with one 3rd-party dependency and a very simple animation on a single element? Then we can work together to find the issue.

Thanks!

Best,

Frank

[themandoz]

Hi Frank:

Here is a test page you can work from.  See attached file.

Thank you for your help.

Andrew

[Frank Shepard]

Andrew, 

I made a small change to your file so that updateAd animates the opacity of the button1 image element rather than the 'left' property of its parent. This works for me in the web tester, which suggests that you should be able to get your animations working with some tinkering. Are you able to see the opacity effect when running the code in the attached file?

Best,

Frank

[themandoz]

Hi Frank,

Yes I do, thanks!  I'll play around some more and will let you know if I can get other behaviors now to work properly.

Thank you for your help!

Andrew

[themandoz]

Hi Frank:

I contacted Greensock about using their JS library with MRAID and they replied with this how-to post:

http://forums.greensock.com/topic/9480-mraid-and-gsap-banner-ads/

Thanks again!

Andrew