Search the Community
Showing results for tags 'events'.
Found 15 results
-
Hey, pls help me in a scenario like if I scroll fast then I miss the text and it jumps to the next section. It should always show the text and image swapping section should be in view when user scrolls again. I am sharing a demo here.
-
It possible to add a native event like: .eventCallback('onKill', function) or maybe a way to force onComplete when is kill ? Example context: pointerdown_Axi3d(e){ // blink renderable objs gsap.fromTo( $objs.LOCAL.unique().map(o=>o.link), 3, { renderable:false }, { renderable:true, repeat:-1, ease:SteppedEase.config(1), id:'blinkRenderable' }) .eventCallback('onComplete', myfunction); } then if i kill pointerup(e){ gsap.killTweenById('blinkRenderable'); } how i can say, kill but plz call the onComplette event ! ? My target is when i kill the tweens lots, i want force restore the value renderable to true inside a event function.
-
The newer version(s?) of Chrome are logging a warning about event listeners declared without a passive state. It looks harmless for now, I just wondered if there were plans to add this functionality, or if there's an existing option I'm not seeing that I just need to add. So far I'm only noticing it with Draggable.
-
Tweens offers many events to detect actions: onStart, onComplete, onReverseComplete... But there's no onReverseStart How would you detect the animation started in reverse?
-
Hello, Do you think if it would be useful to add onPause/onStop event callback? So the state of timeline could be obtained more convenient way? Or maybe I miss something? States: - never played - playing - paused/stopped/killed but not completed - paused/stopped/killed and completed
-
I'm looking at the documentation for TimelineLite.ticker and I'm curious: is it possible to set a priority to the event listener, such that it would be run before tweens and timelines update visually? I'm thinking of, for example, touching the DOM in order to take measurements that might affect a progress parameter, to which timelines refer. Basically read/write or "measure/mutate" batching. addEventListener(type, callback, scope, useParam, priority) Obviously, I can separate this in other ways but let's assume I need to read this value from the DOM just before the tweens and timelines update
-
I’m working on a site that has full height sections. It is laid out as one big page with a few sections. The user has two options to navigate the site: They can use the mouse wheel to go back and forth to the next/previous “section”. They can quickly tween to which ever section they choose via the standard off-canvas menu on the side. Codpen Here: https://codepen.io/kreendurron/pen/ryBrLY/ The problem I'm having is that if you scroll the wheel quickly multiple mouse wheel events fire before the animation can complete its tween. This interferes with the next sections animations. You can see this in the console as shown in the attached screenshot. I hope someone can point me in the right direction as to how I can temporarily disable the mouse wheel until the entire animation has played out and is ready to accept another scroll wheel event. Thanks, Nicholas Brown
-
Hi, I'm having some troubles because the order of execution of callbacks and events seems different when I have nested timelines. I have reproduced a simple scenario: I have a timeline with a tween, then a call to a function that pauses the timeline, then another tween. Both tweens are "fromTo" with immediateRender = false. I have added also complete callback on the first tween and start callback on the second one in order to log them. The result is: - first tween completed - timeline paused The second tween is not starting and its start callback is not executed, as I would expect. Then, I take an identical timeline, and I nest it inside another one. In this case the result is: - first tween completed - run the callback that pauses the timeline - first frame of the second tween executed and its start callback executed - timeline actually paused So only nesting the same timeline, the behavior is different. Consider also that this happens also putting the pause action inside the complete callback of the first tween. The second tween starts in any case before the pause takes effect on the timeline. You can see it clearly in the codepen. Is there something wrong in my setup? Is there a way for having the same execution order in any nested or not nested scenario, except putting tweens and callbacks in slightly different positions? Thanks in advance
-
This came up in my thread from earlier today and ties into another recent thread about events in TweenMax. I'd like to make a feature request for Draggable to emit events (onPress, onDrag, onThrow, etc.). This feature will allow the decoupling of our code from the create function and encourage good coding practice and organisation. Unlike TweenMax, Draggable is heavily tied to the DOM and so I think this is a reasonable request. At the moment I'm doing this using pub/sub to emit the events from within the Draggable init code. It works but it is an extra step. Here is a good example - the PageModule and the HeaderModule are logically separate pieces of code. The PageModule doesn't know about the HeaderModule, it just emits events. Jack, Carl, what do you think?
-
One thing I always find myself doing over and over again is using a query selector to access elements that aren't going to be accessed by any other code. Pair this with additional for loops for adding logic to multiple elements, and you add a lot of additional code. I am tired of typing all this! It would be great to be able to trigger a tween based on a click or other event without having to break out of the TweenMax selector engine style. For example, lets say I want add a drop down menu, normally my code would look like this at it's simplest... var button = document.getElementById("myButton"); var close = document.getElementById("myClose"); button.addEventListener("click",open); close.addEventListener("click",close); function open(e){ TweenMax.to("#menu",.5,{top:100}); } function close(e){ TweenMax.to("#menu",.5,{top:0}); } What if tween max could chain an event callback to a tween method for you? The code could use the same selector engine, and just add a callback or a tween like this: The resulting code would be identical to the code functionality above: TweenMax.eventTo("#myButton","click", "#menu", .5, {top:100}); TweenMax.eventTo("#myClose","click", "#menu", .5, {top:0}); Things could get really interesting if you could accept arrays: TweenMax.eventTo(["#button1","#button2"],"click",["#object1","#object2","#object3"],{top:100}); Or even callbacks! TweenMax.eventCall(["#button1","#button2"],"click", open, someArguments); So the basic signature would be as follows: TweenMax.eventTo(event dispatchers, event string, targets, tween properties); TweenMax.eventCall(event dispatchers, event string, callback, optional arguments); You could even trigger the event dispatcher as the target itself: var buttonList=["#button1","#button2","#button3"]; TweenMax.eventTo(buttonList,"mouseover","_self",{opacity:1}); TweenMax.eventTo(buttonList,"mouseout","_self",{opacity:.5}); Other tween types could be created too, for example: TweenMax.eventFrom TweenMax.eventFromTo TweenMax.eventStaggerTo TweenMax.eventSet
-
I've created a "Scrubber" component that's meant to control a TimelineLite instance. The timeline is passed to other components so that they can add tweens, timelines, etc. However, these may not be added synchronously. The problem, then, is that I have no way of updating my Scrubber when the duration of the timeline changes. On a related note, timelines only one of each callback type (onUpdate, etc.). Given these two issues (duration not observable, no "safe" event listener adding), is it not possible to bind a control to a timeline? Or is there just some trick that I'm not seeing? Any info about what people are doing to accomplish this, or links to anything the author's said about binding like this is much appreciated! Thanks!
-
Currently I can't find anything in the documentation to register a function to be called each time the playhead change. You can listen to `onUpdate`, but this function doesn't trigger when you `timeline.seek(2)` to a position. Any solution to be notified by every changed to the playhead without adding tons of timeline callbacks?
-
I have two TimelineMax objects: ------------------- THE CYCLE: TL1 repeats once with yoyo. TL2 repeats infinitely with yoyo. TL2 is initially set to paused. TL1 plays automatically, & onComplete plays TL2. TL2 has onRepeat to pause itself (TL2), and restart(true) TL1 (restart should respect TL1's delay). ------------------- INTENDED EFFECT: I want the infinitely repeating timeline, TL2, to play and pause at each repeat point of its animation, but this is not happening. Both timelines' playback are controlled by the other. If you look at my Codepen code, you will see that this is not working correctly, and I can't figure out what I'm doing wrong. http://codepen.io/icg-cnunez/pen/nDKoJ Any help much appreciated.
-
To use a jQuery Deferred object to pass along a resolved status when a TimelineLite animation completes. I need to create and resolve a new Deferred object each time the timeline is played. In Flash I would have just set a new 'onComplete' event listener each time the Timeline play function is called, and then removed that event listener each time. Is there an equivalent way to do this with the JS version of TimelineLite?
-
Dear People, I love using your library, It's simple and very effective. I have a simple question, I've look in the documentation but can't find an answer. How can I recieve the TweenMaxEvent inside my event handlers ? example: TweenMax.to(iSprite, iRandTime , { y:_topYSpot, onComplete:onEffectComplete } ); private function onEffectComplete(e:Event = null):void { trace (e); } onComplete always comes to the function with no event, is there any way to recieve the event and know the target/currentTarget as usual AS3 code. Thanks In Advance and have a great day. K
