Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
GreenSock

MRAID and GSAP (banner ads)

Recommended Posts

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

  • Like 3
Link to post
Share on other sites

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>
Link to post
Share on other sites

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? 

Link to post
Share on other sites

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

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.

×