Jump to content
GreenSock

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

MRAID and GSAP

Recommended Posts

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>

 

Link to comment
Share on other sites

First question to answer would be: Who's the ad server? They all have small quirks and rules to follow.

  • Like 1
Link to comment
Share on other sites

I believe cluep will be serving the ad based on what the pm has told me, with tracking from eyereturn. On the spec sheet it just says that the ad needs to be mraid compliant. 

 

Is there a way to just test the code to see if it is compliant without generating an ad tag? I am fairly new to coding mraid banners so I am not sure if I am doing it right by just pasting the html into the mraid webtester. The animation still happens, but cant see any of the assets because they cannot be found.

 

Should have stated this in my initial post, but what I sort of want to know is:

1) Does the code look syntactically correct if it was a for a generic mraid compliant banner?

2) Is there a way to test the creative reliably without generating an ad tag, using mopub or creating my own mraid.js?

 

The attached is all I was given for the specs.

 

Screen Shot 2017-07-28 at 10.28.32 AM.png

Link to comment
Share on other sites

I have never worked with cluep so, can't comment on their side of the equation.

 

When a adserver comes back saying 'the ad is not working' I always press them to know what exactly is not working because it could be N number of things. 

 

Don't know if you have come across the following, it could be of use: https://www.iab.com/guidelines/mobile-rich-media-ad-interface-definitions-mraid/

 

As two your last two questions. I am sorry, I can't help you there. I just don't know. In my personal experience, that end of the setup has always been dealt with by the adServer. All I had to do is write simple bug-free animation and adhere to the adServer's API.

 

  • Like 1
Link to comment
Share on other sites

That last bit is interesting. Maybe I did not need to do the mraid code... We did have countless conversations where I specifically asked what exactly was needed from me, but a lot of information can be lost in translation when it goes through multiple people who are not that technically sound. I will check up on that one last time, got a week to debug anyways.

 

Thanks for the help.

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