Search the Community

With the demise of Adobe Edge, it looks like I am going to focus on using Google Web Designer as a central GUI animation tool. Having coded using GS in Flash for some time, I am glad that GSAP is easy to bring into GWD, especially since it is hosted on their CDN. I personally preferred Edge but never used GS in it, as I was able to make what I needed most of the time without it. My question is about how I could trigger GS functions/effects using events on GWD timeline. I've tried creating events and calling functions that have TweenLite calls in them, I've tried calling TweenLite directly in the event function and neither one works. If anyone has some guidance on this, it would be very welcome. Here's an example of the code generated for a timeline event that is currently not firing the tween at 2.1 seconds <script type="text/javascript" gwd-events="handlers"> window.gwd = window.gwd || {}; gwd.scaleCTA = function(event) { TweenMax.to(redCTA, 0.5, { scale: 1, ease: Back.easeOut.config(4) }); }; </script> I've tried also replacing this with the function call that currently works on rollover to bump the CTA up. Files are attached. Greensock GWD SVG Test.zip

hi guys it seem the doc missing some option for deep callback setup. i found thoses in the API with vscode debugger,. onComplete:, onCompleteParams:, onCompleteScope: But I was found no information to help me on the events. It would be great to supplement the documentation. thanks

Hi GSAP enthusiasts, I am searching for the best way to propagate state changes on timeline level (e.g. "timeline was paused", "timeline started playing again"). There are event callbacks: "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat". But none of them is working for me... I am looking for something like "onStateChange" that I can listen for, to properly propagate state changes. e.g. tl..eventCallback('onStateChange', function(evt) { if (tl.paused()) { /*...*/ } else { /*...*/ } }) Is there any recommended way to achieve this? Any hint appreciated. Happy animating!

Hello! It's my first time useing the tick event provided by greensock, and i am having trouble to figure it out what i am missing in my code, because there are signs that something is not right. Well the concept is that there is a horizontal scrolling area (with iscroll.js), and during scrolling the upcomming element should scale up / animate to it's full size. I use the TweenMax.ticker.addEventListener('tick', myfunction) on line 312 to call the function which detects which box should be animated. On every tick event the selected box(es) properties get updated with TweenMax.set. The problem is that the performance is not right, there is a flickering during scrolling and in IE11 it is even worse (very jumpy). I have put together a fiddle to see it in action: https://jsfiddle.net/LaszloOveges/yykc0356/ Anyone has an idea what is wrong with this code? I would really appreciate any comment. Cheers, Laszlo

Hi there! I'm a total newbie but already enjoying playing around with Greensock. I'm working on an accordion menu, and this is the behavior I'm going for: 1. User clicks on a menu item. 2. Menu item's panel is revealed. 3. A sequence of three animations is triggered within that one panel. 4. User clicks to collapse menu item and the whole thing is reset. Right now, the fader animation I have on animEvent is triggered on window load and subsequent user clicks change nothing. I'm thinking I need to use TimelineLite to start the animation when the specific menu item is clicked. But I'm very new to this and would appreciate someone pointing me in the right direction. Thanks! Hilary

In my Codepen example, there is a gold circle. When you click the gold circle, it moves around the page using `x` and `y`. If you click the circle while it's moving around, another timeline animation for the circle gets queued and runs after the initial one has finished. I want to prevent this behaviour. My instinct tells me to use lodash `throttle`, but I feel there should be a better way to do this, especially as I would need the duration of the animation to use a throttle. I want any click to the circle to have no effect if the animation is in progress. Is there a `TimelineMax` method I can use to achieve this?

I'm using Draggable to create scrollable element with several divs inside it. For example <div id="draggable"> <div>example</div> <div>example</div> <div>example</div> </div> I want to apply some mousedown jquery code to the divs. for example: $("#draggable div").on("mousedown", function() { //do something... }); The Draggable seems to overwrite and/or steal jQuery's mousedown event. If I disable the Draggable then there is no issue. If I apply some click jquery there is no issue either. for example: $("#draggable div").on("click", function() { //do something... }); I do need to use the mousedown event in this scenario. Has anyone encountered something similar, or does anyone have a solution?

Hi guys! I have the following problem: There is a draggable with attached methods onPress and onRelease. The draggable component has a button child. When I click on the draggable but outside of the button both events get fired. But when i click on the button only the onPress event gets fired (you can check this in the browser console). Same result happens if I put an input as a child and click on it. Codepen: http://codepen.io/anon/pen/jqqyEQ I need a way to fire both onPress and onRelease events when I click on buttons and inputs that are children of the draggable component. Thanks in advance!

Hi guys, Just scratching my head at this. As you can see in my codepen with your console open, all the on[EVENT]s fire, except onRepeat. I'm in need of having an event fire at the end of the repeatDelay on the timeline, but as it stands, I can't find one. Does anyone have any idea how I can find out (and call a function) at the exact moment the text starts to disappear again? Many thanks! EDIT: Just a note, removing the yoyo and repeatDelay, still means that the onRepeat event doesn't fire... am I missing something obvious here?

I have some code that checks conditions in the onDragStart handler. I'd like to be able to cancel the drag if a set of conditions are not met. I had assumed that returning false from handler would do it, but was wrong. Is there any clean way to cancel a drag in this case?

I am accessing the time property via the ticker() methods event object: TweenMax.ticker.addEventListener("tick", loop, this, true, 1); function loop(e){ // the time property in the target if(window.console) console.log(e.target.time); // the time property in the target._eventTarget if(window.console) console.log(e.target._eventTarget.time); // do stuff with passing time } When accessing the time property in the event object that gets passed, which time property is best to use when keeping track of the passed time: e.target.time or e.target._eventTarget.time Any help will be highly appreciated!

I'm sure there's an error in my code, but when I do this ($event is a mouseEvent) TweenMax.delayedCall(_gameClickDelay,showDetailScreen,[$event]); when I get to showDetailScreen($event:MouseEvent) private function showDetailScreen($event:MouseEvent):void { $event.current is no longer the button on which I originally clicked, but instead Stage, the trace is: $event.currentTarget = [object Stage] and $event itself traces as "0". trace("$event = " + $event); TweenMax.delayedCall(0,function ($x:MouseEvent) {trace("delayed call? " + x)},[$event]); yields $event = [MouseEvent type="click" bubbles=true cancelable=false eventPhase=2 localX=49.72636795043945 localY=109.43730163574219 stageX=487.6 stageY=709.2 relatedObject=null ctrlKey=false altKey=false shiftKey=false buttonDown=false delta=0] delayed call? 0

Hi all! Today I was trying to execute some instructions on manual scroll event, avoiding the scroll animation performed by TweenMax. I attempted to initialize a boolean variable, which is false during the TweenMax animation and is restored to true "onComplete". On $(window).on("scroll") I checked the status of the variable. I found out that a scroll even was triggered even when my status variable was already returned to true: after some tests, it turns out that it's TweenMax itself. I tried on an empty page, reporting the following code in Firebug console, and looks like after the "hi" reported by TweenMax onComplete, another scroll event is triggered. $(window).on("scroll", function(){console.log ("scroll");}); TweenMax.to(window, 1, { scrollTo: { y: 500 }, ease: Linear.easeNone, onComplete: function () { console.log("hi!"); } }); I wouldn't expect this behavior: why does this happen? Thanks in advance! Massi

Hey, I know this tweening engine is the best. But, until yesterday i found something weird, the onComplete event does not fire. here is my code: import flash.events.MouseEvent; import flash.display.Loader; import flash.events.Event; import flash.net.URLRequest; import flash.display.MovieClip; import flash.display.StageScaleMode; import flash.display.StageAlign; import com.greensock.TweenMax; stop(); stage.scaleMode = StageScaleMode.NO_SCALE; stage.align = StageAlign.TOP_LEFT; var basePath:String = "projects/"; var projectName:String = "Mandiri/"; var theSWF:String = ""; banners.banner1.addEventListener(MouseEvent.CLICK, onClick); banners.banner2.addEventListener(MouseEvent.CLICK, onClick); banners.banner3.addEventListener(MouseEvent.CLICK, onClick); banners.banner4.addEventListener(MouseEvent.CLICK, onClick); function onClick(me:MouseEvent):void{ //trace(sub_container.numChildren); if(sub_container.numChildren > 0){ TweenMax.to(sub_container.getChildAt(0), 1, {alpha:0, onComplete:clearChildren, onCompleteParams:["Yayy"]}); } switch(me.currentTarget.name){ case "banner1": theSWF = "01.swf"; break; case "banner2": theSWF = "02.swf"; break; case "banner3": theSWF = "03.swf"; break; case "banner4": theSWF = "04.swf"; break; } var swfLoader:Loader = new Loader(); swfLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadSubComplete); swfLoader.load(new URLRequest(basePath + projectName + theSWF)); } function clearChildren(param):void{ trace(param); TweenMax.killTweensOf(sub_container); sub_container.removeAllChildren(); trace(sub_container.numChildren); } function onLoadSubComplete(ev:Event):void{ var theLoaded:MovieClip = MovieClip(ev.target.content); theLoaded.x = -theLoaded.width/2; theLoaded.y = -theLoaded.height/2; sub_container.addChild(theLoaded); TweenMax.to(theLoaded, 1, {alpha:1}); } stage.addEventListener (Event.RESIZE, resizeListener); function resizeListener(ev:Event):void{ sub_container.x = stage.stageWidth/2; sub_container.y = stage.stageHeight/2; banners.x = stage.stageWidth/2 - banners.width/2; } DisplayObject.prototype.removeAllChildren = function(){ for(var j = this.numChildren-1; j >= 0; j--){ this.removeChildAt(j); } } If you see that onComplete:clearChildren, onCompleteParams:["Yayy"] inside onClick function, it does not fire. But when I try onStart event, it fired perfectly normal. Please help, thanks before. And sorry, for my bad english.