Jump to content
Search Community

MRAID and GSAP (banner ads)

GreenSock test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 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...