reveldevil

Hi Carl: Great advice. I will remove my sequences from their functions and start working within a global space. I'll definitely check out video you have offered. Thank you for your time and help. Andrew

Hi Jack, So i have 3 fullscreen sliding background panels that host 3 different GS TimelineMax animated sequences. One GS TimelineMax sequence per background panel. The function init02() plays the TimelineMax sequence over a 15 second period of time. If the user wants to see the next panel and the next TimelineMax animated sequnce, I want to stop, cancel, and reset the function init02() TimelineMax sequence (especially if it hasn't completed playing out) while at the same time I go to the next panel and start the new function init03() Timeline Max sequence. I have created an arrow down object on stage and have applied an "onclick" JS event as shown in my example. Yes I'm hoping to pause and clear by passing the the ( tl2.pause(0).clear() ) as a parameter in init02. The init03 call is also added here to start the next animated TimelineMax sequence on the next background panel. Let me know if what I'm trying to do is possible or if I should try something different. Thanks.

Ok nothing beautiful, but here is an example of the error I'm seeing. Click the red block to and try to cancel the blue block animation from playing out. The console will show you the error I'm seeing. http://codepen.io/RandomVisualDump/pen/MaxyKv

How can I make this work? I want to pause, clear/reset my TimelineMax from this onclick function call. I'm getting an "Uncaught SyntaxError: missing ) after argument list" when I run the console. Is what I'm trying to do correct or possible? <div class="nav"><div class="arrowDown"><a href="#slide03" onclick="init03(); init02(tl2.pause(0); tl2.clear(); ); "></a></div></div> </div> An abbreviatated JS version of the init02() function has this: function init02(){ var tl2 = new TimelineMax(); tl2.to... } Thank you for your time and help.

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

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>

Hi Carl: Your code is a step in the right direction, but this design is still not working as well as it should. Here are a couple factors that I also didn't address that may be influencing its behavior. 1. The external overlay I am trying to fade in and out sits on top of an external video that plays at the same time. 2. The external overlay has 3 MovieClip (AS3) buttons that are coded within that overlay. I'm finding the overlay to load up just fine, but then blink every 1 second as it seems to be unloading and reloading. I don't want the overlay to be timed on stage with a predetermined number, but rather hold until the mouse moves off the hot spot. Additionally I'm seeing a lag time here also from the moment I move the mouse off the hotspot to the moment it disappears. This also seems to be associated with the 1 second hold time? I've tried to remove this timer, but then the overlay doesn't appear. Anymore suggestions? Thanks, Andrew

Hi Carl: Thanks so much for your help. I'll get back to you tomorrow and let you know if your solution brings me success. Andrew

Hello: I'm new to your Greensock classes and somewhat new to ActionScript 3.0. What I'm trying to achieve with the use of your Loadermax class is the ability to have my mouse rollover an invisible hot spot on the stage and load (dissolve in) an external SWF file. I am able to get the loading process to work and achieve the fade in I desire, but for the life of me I'm unable to get the external SWF file to unload (fade out) no matter what I try. Additionally I am also running into the issue that whenever I do rollover the hotspot, a new instance of the external SWF loads on top of the other one I'm trying to make disappear. Below is the code with the working part of the product (no errors). I'm looking for suggestions to how I might get the external SWF to fade out and unload when the users mouse moves away from the invisible hot spot. I thank you for your time and help. import com.greensock.*; import com.greensock.loading.*; import com.greensock.easing.*; import com.greensock.events.LoaderEvent; hotspot.addEventListener(MouseEvent.MOUSE_OVER, navOver); hotspot.addEventListener(MouseEvent.MOUSE_OUT, navOut); hotspot.alpha = 0; function navOver(e:MouseEvent) { var loader:SWFLoader = new SWFLoader("toyota_overlay.swf",{container:this,x:178,y:377,alpha:0, name:"swf1", onComplete:completeHandler}); addChild(loader.content); loader.load(); function completeHandler(e:LoaderEvent):void { TweenLite.to(e.target.content, 1, {alpha:1}); var mcTemp:MovieClip = loader.rawContent; mcTemp.testing(); } } function navOut(e:MouseEvent):void { trace("Release"); }