Jump to content

Search the Community

Showing results for tags 'mraid'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 2 results

  1. 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>
  2. 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