MRAID and GSAP (banner ads)

[GreenSock 8,117 Likes (Superhero)]

I was asked on Facebook about using GSAP in banner ads that are created for/in the MRAID system, and since Facebook is really bad for tech support and posting code, I figured I'd start a topic here so others could benefit too...

 

You can create and test an ad in a browser-based simulator here: http://webtester.mraid.org/. I noticed that there was a problem with the simulator or MRAID itself that was causing it to trigger the ad BEFORE 3rd party libraries had finished loading. So in this case, TweenLite wasn't defined yet, thus no animations would work. The simple workaround is to add some conditional logic so that your animation code doesn't run until both MRAID is ready and TweenLite/CSSPlugin has loaded. Here's a simple example that seems to work fine in the simulator:

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/plugins/CSSPlugin.min.js"></script>
<div id="box" style="background-color:green; width:100px; height: 50px; position:absolute;"></div>
<script>
//this method gets called when the ad is ready and should run.
function runMyAd() {
    TweenLite.to("#box", 2, {y:100, opacity:0.5});
}

//this function keeps checking to see if mraid is ready and TweenMax has finished loading. 
function doReadyCheck() {
    if (mraid.isViewable() && window.TweenLite) {
        runMyAd();
    } else {
        setTimeout(doReadyCheck, 100);
    }
}
doReadyCheck();
</script>

Useful link: Common problems and best practices: http://www.iab.net/media/file/MRAID_Best_Practices_Final.pdf

[reveldevil 0 Likes (Newbie)]

Hello:
So, I tried editing my code based on your example above, but am still not getting the animation to work with the assigned div's within the MRAID simulator.  Perhaps you can take a look and let me know where I'm going wrong. Thanks so much, I truly appreciate your help.  Here is my code:

<script src="mraid.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TweenLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.7/easing/EasePack.min.js"></script>

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

<div id="adContainer" style="width:320px;margin:0px;padding:0px;background-color:#ffffff;">
    <div id="normal" style="display:none;width:320px;height:50px;margin:auto;position:relative;top:0px;left:0px;background-color:yellow;">
        <img width="320" height="50" onclick="javascript:expandMe();"/>
    </div>
    
    <div id="expanded" style="display:none;width:320px;height:480px;margin:auto;position:relative;top:0px;left:0px;background-color:yellow;">
    <img width="320" height="480" style="position:absolute;top:0px;left:0px;z-index:100;" />
    
    <div id="btn1"><img width="98" height="55" style="position:absolute; top:405px; left:9px; z-index:102; background-color:red;" onclick="javascript:openWebPage('#');" /></div>
    <div id="btn2"><img width="98" height="55" style="position:absolute; top:405px; left:112px; z-index:102; background-color:white;" onclick="javascript:openWebPage('#');" /></div>
    <div id="btn3"> <img width="98" height="55" style="position:absolute;top:405px;left:215px;z-index:102;background-color:blue;" onclick="javascript:openWebPage('#');" /></div>
    </div>
</div>

<style type="text/css">
body
{
    background-color:#000;
}
</style>

<script>
// Expanded Ad Functions
function openWebPage(url)
{
    mraid.open(url);
}

// Core Ad Functions
function collapseMe()
{
    mraid.close();
}

function adIsReady()
{
    mraid.removeEventListener("ready", adIsReady);
    gsReadyCheck();
    /*showMyAd();*/
}

function showMyAd()
{
    var el = document.getElementById("normal");
    el.style.display = '';
    

    mraid.addEventListener("stateChange", updateAd);  
}

function expandMe()
{   
    
    mraid.setOrientationProperties({"allowOrientationChange":false, "forceOrientation":"portrait"});
    mraid.expand();
        
        
  
}

function updateAd(state)
{   
    if (state == "expanded")
    {
        toggleMe('normal', 'expanded');
	setTimeout(function() { $(function () {
		var btn1=$('#btn1 > img');
		var btn2=$('#btn2 > img');
		var btn3=$('#btn3 > img');
		var tl = new TimelineLite();
        tl.from(btn1, .5, {scale:0, ease:Expo.easeOut})
          .from(btn2, .5, {scale:0, ease:Expo.easeOut})
          .from(btn3, .5, {scale:0, ease:Expo.easeOut});	
        
				}); 
			}, 
        0);  

        
        
    }
    else if (state == "default")
    { 
        toggleMe('expanded', 'normal');
    
    
    
    }
}



function toggleMe(fromLayer, toLayer)
{
    var fromElem = document.getElementById(fromLayer);
    fromElem.style.display = 'none';
    
    var toElem = document.getElementById(toLayer);
    toElem.style.display = '';
}


function viewportSetup(width)
{
    var element = document.querySelector("meta[name=viewport]");
    if (!element)
    {
        element = document.createElement("meta");
        element.name = "viewport";
        element.content = "width=" + width + ", user-scalable=no";
        document.getElementsByTagName('head')[0].appendChild(element);
    }
    else
    {
        element.content = "width=" + width + ", user-scalable=no";
    }
}
viewportSetup(320);

function readyCheck()
{   
    if (mraid.getState() == 'loading') 
    {   
        mraid.addEventListener("ready", adIsReady);  
    } 
    else
    {   
        gsReadyCheck();      
    }
	
	
}

function gsReadyCheck() {
    if (mraid.isViewable() && window.TimelineLite && window.TweenLite) {
        showMyAd();
    } else {
        setTimeout(gsReadyCheck, 100);
    }
}


readyCheck();

</script>

[GreenSock 8,117 Likes (Superhero)]

I didn't have time to sift through all your code, but since you commented out the jQuery and jQuery UI script loads toward the top, there was an error getting thrown saying "$ is not defined". As soon as I uncommented those script tags, everything seemed to work fine. I saw animation when I clicked on the ad. 

 

So basically it had nothing to do with GSAP - you just had code that was dependent on jQuery and you forgot to load jQuery

 

Does that solve things for you? 

[reveldevil 0 Likes (Newbie)]

I just knew it was going to be something stupid on my part.  Thanks a bunch for your help!