PapaDeBeau

Hi, I just recently took Carl's free class "GSAP Express" and am loving it so much that I became a lifetime member. It's amazing. Thank you for your hard work and great teaching style. I have one silly question. I call it silly because I know I am close and it must be one little thing "silly" I am missing. QUESTION: Why is my timeline in this forEach not playing? I see the code is running in the log but not the timeline. Also, why am I seeing this in the log? In my mind I see no mistake compared to Carl's example. What am I missing? After 10 years plus being a part of this community, not very active, I am finally REALLY diving in and taking classes. Loving it and this amazing forum and community. Why did I wait so long? Thanks for all you do.

QUESTION: Based on this topic. Hi, I love this idea. It's a "little" more advance than I would like. Is it possible to simplify and manually animate to an anchor? For example not use Arrays etc and do "Something Like": // ON CLICK gsap.to("#AnchorOne", {y:AnchorOne.position]); I understand this is not the exact code. Just using and example. I don't mind if it's more manual, as long as I understand it. Thanks so much.

QUESTION: Forgive me if I missed it, but I think the question was "how do you 'trigger' audio with scroll trigger at a certain point?" This is what I would like to know. I don't want to start a new question so I am hoping this gets some attention still. Thank you. I love GSAP.

Thank you. This works if the div is called .test. What if we want it to spin ANY div it clicks on. I didn't know how to put a PEN inline. Here is the exampled: https://codepen.io/PapaDeBeau/pen/Vwqvoez

Thank you, Jack, for your replay. Ok so I understand a little more, but how would I make it so whatever element I clicked on that would rotate? This is essentially what I am trying to do. So I just have one THIS button and the rotation is applied to every element I click. This must be possible right? Thanks

$(this).on("click", function(){ gsap.to($(this), .5, {rotation:360, transformOrigin:"50% 50%"}); }); JQuery sess the $(this) and recognizes the click and runs but in the function it does not see the $(this) and I get an error: Invalid property rotation set to 360 Missing plugin? gsap.registerPlugin(). I am loading GSAP by a script tag like this: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> The GSAP will work if it's outside of the click function but will not work in the click function. How do I get GSAP to see the object I clicked on? Thanks

Hi, Sorry for my simplicity in this question. I have been a paying member for YEARS now and I very rarely ask questions. Anyway thanks for your patience. Here is my goal. I want to load a list of hundreds of Names from a Database, maybe even over 1K or 2K. Then I load them into jQuery Array. I want to have like maybe 10 or 20 names float from the bottom to the top. In short this is like a Memorial Wall of people who have passed away. We want to honor their life with music etc... I have code working but when its coded very poorly. When I get many names it CHUGS and STUTTERS because it's creating huge amounts of DIVS and animating them all. This is bad I know. I would like to, maybe, animate only 10 to 20 and then once off screen I would UNLOAD OR HIDE the div to free up resources. I would also like to maybe add a candle the is animated by the name as well. This would also take up huge resources if it was many names loaded. What is the best way to loop though hundreds maybe even thousands of names and not have to load them in all in one go. Also, I would like the names to float up at various speeds as an option and would like them to be in random x positions as they go up. ANOTHER issue with my code is that sometimes the names are so long they go off the right side of the screen. They are not contained. I am guessing this is fairly simple, but gosh I just don't know how to do it. I Thank you in advance for helping me overcome this. I put my example on CodePen with reloaded STATES as the names, but eventually those NAMES will be real names loaded from a Database. var W = $(window).width(); var H = $(window).height(); for (i = 0; i < Names.length; i++) { $(".P").append('<div class="C" >' + Names[i] + "</div>"); var tl = gsap.timeline({ delay: 1 }); var Mary = $(".C").width(); gsap.fromTo( ".C", { y: H + 100, x: "random(0, " + W / 2 + ")", opacity: 0 }, { y: -333, opacity: 1, duration: 14, stagger: 0.8 } ); } I didn't put the NAMES vars in this code above but I did in the working example in CodePen. Thanks for your help. The code is here: https://codepen.io/PapaDeBeau/pen/LYBEjdb

Link is broken. I could use this. Thanks

And so is it updated then?

How do I get my mc to be active after I animate my blitmask? I am missing just one line of code somewhere i believe. My Content:MC I am bringing in works and has active buttons. They only stopped working when I added the Blitmask for faster scrolling. But how do I get it back after the update? Thanks package com { import flash.display.MovieClip; import flash.events.*; import flash.utils.getTimer; import flash.geom.Rectangle; import flash.display.Shape; // Greensock Annimation import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.plugins.TransformAroundCenterPlugin; TweenPlugin.activate([TransformAroundCenterPlugin]); TweenPlugin.activate([TransformAroundPointPlugin]); import com.greensock.plugins.CacheAsBitmapPlugin; TweenPlugin.activate([CacheAsBitmapPlugin]); TweenPlugin.activate([ThrowPropsPlugin]); public class scrollContent extends MovieClip { public var mc: MovieClip; public var bounds: Rectangle; public var MainStage: MovieClip; public var blitMask: BlitMask; public var t1: uint, t2: uint, y1: Number, y2: Number, yOverlap: Number, yOffset: Number; public function scrollContent(Content: MovieClip) { // constructor code addEventListener(Event.ADDED_TO_STAGE, init); mc = Content; } public function init(e: Event) { MainStage = this.parent as MovieClip; trace("scroll Stage: " + MainStage); bounds = new Rectangle(0, MainStage.MenuBar.height, Main_Activate._screenX, Main_Activate._screenY - MainStage.MenuBar.height); addChild(mc); blitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false); blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } public function mouseDownHandler(event: MouseEvent): void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; yOffset = this.mouseY - mc.y; yOverlap = Math.max(0, mc.height - bounds.height); t1 = t2 = getTimer(); mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } public function mouseMoveHandler(event: MouseEvent): void { var y: Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { mc.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { mc.y = (y + bounds.top - yOverlap) * 0.5; } else { mc.y = y; } blitMask.update(); var t: uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = mc.y; t1 = t; } event.updateAfterEvent(); } public function mouseUpHandler(event: MouseEvent): void { mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time: Number = (getTimer() - t2) / 1000; var yVelocity: Number = (mc.y - y2) / time; ThrowPropsPlugin.to(mc, { throwProps: { y: { velocity: yVelocity, max: bounds.top, min: bounds.top - yOverlap, resistance: 300 } }, onUpdate: blitMask.update, ease: Strong.easeOut }, 10, 0.3, 1); } } }

Hi, Not sure how many questions get asked about flash these days but I have one. I have having issues on scrolling using the code below. It works but but its slow. I am thinking a "blitmask" would work great here but I don't know where I would put it. Can you give me some tips? Thanks -Ed /// SCROLL BAR /////////////////////// public function throwIt(clipContent:MovieClip) { // old code //var bounds:Rectangle = new Rectangle(_screenX - clipContent.width,0,_screenX,_screenY); // custom var var bounds:Rectangle = new Rectangle(0,0,_screenX,_screenY); //var mc:Sprite = meow.getChildByName("content") as MovieClip; var mc:Sprite = clipContent as MovieClip; addChild(mc); //some variables for tracking the velocity of mc var t1:uint,t2:uint,y1:Number,y2:Number; mc.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(mc); y1 = y2 = mc.y; t1 = t2 = getTimer(); mc.startDrag(false, new Rectangle(bounds.x, -99999, 0, 99999999)); mc.addEventListener(Event.ENTER_FRAME, enterFrameHandler); mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function enterFrameHandler(event:Event):void { //track velocity using the last 2 frames for more accuracy y2 = y1; t2 = t1; y1 = mc.y; t1 = getTimer(); } function mouseUpHandler(event:MouseEvent):void { mc.stopDrag(); mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); mc.removeEventListener(Event.ENTER_FRAME, enterFrameHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (mc.y - y2) / time; var yOverlap:Number = Math.max(0,mc.height - bounds.height); ThrowPropsPlugin.to(mc, {ease:Strong.easeOut, throwProps:{y:{velocity:yVelocity, max:bounds.top , min:bounds.top - yOverlap - (littleLogo.height + littleLogo.height/3) , resistance:777}}}, 33, 0.25, .3); } } ////////////////// /// end SCROLL/////////////

SOLVED: - I think So here is what I did. I made a new boolean: var flagsClickNow:Boolean = true; Then instead of using a MouseEvent.CLICK - I used a MouseEvent.MOUSE_DOWN Then I did an event listener using a MOUSE_MOVE event. If it is moving I made the boolean false so when the finger came off the button it would not triger the button. When on a mouse_up event I set the boolean back to true. So now when they click on a button while it's not moving it will go to the MC I intended. Does this make sense? Do you see any potential pitfalls? I still think you guys should do a tutorial based off of this logic Thanks Amigos!

Hi guys, Thanks for the great tips. Let me try to explain what exactly I need. First I will say I did something that "kind of" helped by making the button press on the bittMask a touch event, a "tap" or a "press" mobile event. That helped a little but its still a little sketchy and I want to ensure it's the best for the users. In short my "Flag Buttons" load two by two all the way down off the screen. Each flag when "pressed" is supposed to do an action. But I want the whole bittMask to be "flickable" like the iPhone screens that have more content below... like a scroll to see the new content. I am hoping you know what I mean. Anyway, the "flick" always works but sometimes when you start the flick from a button it "flicks" but when I let go it calls the function from the button and loads that screen. I hope this makes sense. Please let me know what works best with this. I have a testFlightApp account so I can send you a demo if you need. Please email me at ed.vizenor@gmail.com and I can add your iPhone to my testing account to show you. Thanks for all your support and this great product. P.S. I think that that one of you suggested is the issue but I look at the book to read on that page and it has so many HUGE code bits and even new people posting their code for help that its hard to find out what the answer is. Perhaps JACK or you guys could do a tutorial on this subject because my guess is 90 percent of users who use throwprops on devices will want to achieve this effect on smart phones. Or maybe you could upload another thowprop example with code on it

I am sure this might be a common issue but I have buttons in my mc that is being moved by throws prop with the iPhone effect. I am using eventListerners. How do I fix this issue? It is creating buttons dynamically in this function and adding dynamic event listners to each button and then finally putting them all in on MC and making it "flickable" with throwProps. Here is my code/// DECLARES flagMC var flagMC:MovieClip = new MovieClip(); var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight); var blitMask:BlitMask; function displayFlags(evt:Event = null) { trace("DISPLAY FLAGS---------------"); if(!Lang) { trace("No Lang!"); return; } var p:uint = 0; for (var i:uint = 0; i < Lang.length; i++) { flag = new Loader(); flag.load(new URLRequest(File.applicationStorageDirectory.url + "Languages/" + Lang + "/roundFlag.png")); flag.name = Lang; flagButton = new roundFlag(); flagButton.btext.text = Lang; addChild(flagButton); flagButton.removeChildAt(1); flagButton.addChildAt(flag,1); flag.addEventListener(MouseEvent.CLICK, loadLang(Lang,flagMC)); var fh = flagButton.getBounds(flagButton); if (i % 2){ flagButton.x = flagButton.width + flagButton.width/20; flagButton.y = fh.y * i;} else {flagButton.x = 0; trace("I is " +i); flagButton.y = fh.y * i; } // flagButton.y = fh.y * i; trace(fh.height); trace("Flag Button Height " + flag.height); flagMC.addChild(flagButton); } //addChild(flagMC); flagsIn(); flagMC.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); } //B1.addEventListener(MouseEvent.CLICK, getLang); //B2.addEventListener(MouseEvent.CLICK, displayFlags); import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import flash.geom.Rectangle; import flash.utils.getTimer; import flash.events.MouseEvent; import flash.text.*; import flash.display.*; TweenPlugin.activate([ThrowPropsPlugin]); var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number; function mouseDownHandler(event:MouseEvent):void { trace("Mouse Down"); TweenLite.killTweensOf(flagMC); y1 = y2 = flagMC.y; yOffset = this.mouseY - flagMC.y; yOverlap = Math.max(0, flagMC.height - bounds.height); t1 = t2 = getTimer(); flagMC.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); flagMC.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if flagMC's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { flagMC.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { flagMC.y = (y + bounds.top - yOverlap) * 0.5; } else { flagMC.y = y; } //blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = flagMC.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { trace("Mouse Up"); flagMC.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); flagMC.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (flagMC.y - y2) / time; ThrowPropsPlugin.to(flagMC, {throwProps: { y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}}, //onUpdate:blitMask.update, ease:Strong.easeOut }, 10, 0.3, 1); } that causes the issue:

oh wow. I just did research on blitMask. I would love to get this code working on this app. It's for a phone. I sent the fla. Can you take a look at it. I also included the code pasted but you need the files to see how it's not working. Now I want to Mast blitMask. It seems to be so fast! Thanks again.