Search the Community
Showing results for tags 'mraid'.
Found 2 results
-
Hey guys, I am wondering if I can get some help understanding how to use the MRAID library with GSAP on an a banner. The adserver is saying that the file does not work and I am sort of at wit's end now. <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name='viewport' content='width=device-width,maximum-scale=1' user-scalable="no"> <title></title> <script src="mraid.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> </head> <style type="text/css"> img { border: 0; } body { margin: 0; padding: 0; } a { cursor: pointer; border: 0; } .default{ position: absolute; left:0; top:0; } #mainContainer { display: block; cursor: pointer; position: absolute; width: 320px; height: 50px; border: 1px solid black; box-sizing: border-box; background-color: #ffffff; /*background-image: url('pic2.png');*/ overflow: hidden; } #expandedContainer{ display: none; cursor: pointer; position: absolute; width: 320px; height: 480px; border: 1px solid black; box-sizing: border-box; background-color: #ffffff; /*background-image: url('pic2.png');*/ overflow: hidden; } #pinContainer { width: 17px; height: 105px; left: 163px; top: 116px; overflow: hidden; } </style> <body> <div id="mainContainer"> <img class="default" src="bg.jpg" id="bg"> <img class="default" src="t1.png" id="t1" onclick="javascript:openWebPage('http://www.google.com/')"> <img class="default" src="expandbtn.png" id="expandBtn" onclick="javascript:expandMe()"> <img class="default" src="arrow.png" id="arrow" onClick="javascript:expandMe()"> <img class="default" src="logo.svg" id="logo"> </div> <div id="expandedContainer" onclick="javascript:openWebPage('http://www.google.com/')"> <img class="default" src="bgexp.jpg" id="bge"> <img class="default" src="ctaexp.png" id="ctae"> <img class="default" src="t1exp.png" id="t1e"> <img class="default" src="t2exp.png" id="t2e"> <img class="default" src="t3exp.png" id="t3e"> <img class="default" src="t4exp.png" id="t4e"> <img class="default" src="t5exp.png" id="t5e"> <img class="default" src="t6exp.png" id="t6e"> <img class="default" src="logoe.svg" id="logoe"> <div class="default pinContainer" id="pinContainer"> <img class="default" src="pinexp.png" id="pine"> </div> </div> <script type="text/javascript"> //Clickthrough function openWebPage(url) { mraid.open(url); } //Collapse Ad function collapseMe() { mraid.close(); } function adIsReady() { mraid.removeEventListener("ready", adIsReady); gsReadyCheck(); } function showMyAd() { var tl = new TimelineMax(); tl.to(logo, 0, {width:33, height:33, left:13, top:8}); tl.to(expandBtn, 0, {x:275, y: 9}); tl.to(arrow, 0, {x:283, y: 22}); tl.from(t1, 0.75, {ease: Power1.easeIn, alpha:0}); tl.from(expandBtn, 0.5, {ease: Back.easeOut, scaleX: 0, scaleY: 0}, "+=0.5"); tl.from(arrow, 0.5, {ease: Back.easeOut, scaleX: 0, scaleY: 0}, "-=0.5"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0}, "+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0},"+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0},"+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); tl.to(arrow, 0.5, {ease: Sine.easeOut,alpha:0},"+=0.5"); tl.to(arrow, 0.75, {ease: Sine.easeOut,alpha:1},"+=0.2"); mraid.addEventListener("stateChange", updateAd); } function expandMe() { mraid.setOrientationProperties({"allowOrientationChange":false, "forceOrientation":"portrait"}); mraid.expand(); } function updateAd(state) { if (state == "expanded") { expandedContainer.style.display = "block"; var tle = new TimelineMax(); //320x480 Animation tle.to(logoe, 0, {width: 238, height:41, top:428, left:41}); tle.from(t1e, 0.5, {ease: Quad.easeOut, alpha: 0, x: 100}); tle.from(pinContainer, 0.5, {ease:Quad.easeInOut, height: 0}); tle.from(t2e, 0.75, {ease:Power1.easeOut, alpha: 0}); tle.from(t3e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}); tle.from(t4e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}, "-=0.25"); tle.from(t5e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}, "-=0.25"); tle.from(t6e, 0.75, {ease:Quad.easeOut, alpha: 0, x: -100}, "-=0.25"); tle.from(ctae, 0.5, {ease:Back.easeOut, transformOrigin: "166px 405.5px", scaleX:0, scaleY:0}); toggleMe('normal', 'expanded'); } else if (state == "default") { expandedContainer.style.display = "none"; 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 readyCheck() { if (mraid.getState() == 'loading') { mraid.addEventListener("ready", adIsReady); } else { gsReadyCheck(); } } function gsReadyCheck() { if (mraid.isViewable() && window.TimelineMax) { showMyAd(); } else { setTimeout(gsReadyCheck, 100); } } readyCheck(); </script> </body> </html>
-
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
