killroy had the most liked content!

# killroy

Members

50

1

1. ## Accelerated motion algorithm. Perhaps you can turn that into a Tween?

I'm not familiar with that How can it do that with less processing? Are you talking about mathematical operations? I mean there are only a couple of divides and multiplies, really. And does the ThrowPropsPlugin work if the distance or velocity is arbitrarily changed during any frame? Perhaps a better demonstration of the algorithm is the 3D RTS I'm working on: https://twitter.com/killroy42/status/818436958816993280 The turning thrusters are simply read out from the acceleration value. The target point is the mouse cursor, and the algorithm is applied to linear distance and angular distance for turning.
2. ## Accelerated motion algorithm. Perhaps you can turn that into a Tween?

You asked for a demo posted to the forums on Twitter, so here it is. The important bit is this function: const calcAccel = (x, v, maxA, dt) => { if(dt === 0) return 0; const signX = (x < 0)?-1:1; const a = signX * (Math.sqrt(Math.abs(1 + (2 * x) / (maxA * dt * dt))) * maxA - (v * signX) / dt - maxA); return Math.min(maxA, Math.max(-maxA, a)); } It takes a distance, velocity, maximum acceleration and time delta and returns the acceleration that needs to be applied to reach the destination and stop there given acceleration and velocity constraints. The attractive part of this is that the destination can be changed at will and the formula will always work out. And if the acceleration and velocity constraints are such as to prevent exactly stopping on the target, it will simply overshoot and correct. I've come to this after first trying to apply tweening to my problem. But perhaps this can be wrapped into a custom tween. Basic demo: http://codepen.io/killroy/pen/jyaKYo Real-world demo: http://codepen.io/killroy/pen/MJvGLW I've developed it for various applications in an RTS game (such as turning turrets and ship motion), but I constantly find other applications for it. Cheers!
3. ## Introducing GSAP 1.18.0

How cool! I had added cycle-like functionality in my wrapper for GSAP. Now I can remove it and convert to native usage!
4. ## How to animate x/y without touching scale

Thanks, that's what I was looking for. I'll check it out!
5. ## How to animate x/y without touching scale

Well, I was aware that it would work within GSAP. I'm trying to keep my codepen prototypes as independent of 3rd party libs as possible. Here, the shake system used GSAP, but it basically "infects" everything else such that a system using the shake would now have to be modified to use GSAP throughout. Is there no way to tell GSAP which properties to modify and have it not modify others?
6. ## How to animate x/y without touching scale

It seems that when animating x/y coordinates (via transforms), GSAP sets the entire matrix, without taking changes to other properties into account. In the codepen, I shake the display by animating x/y, and I update scale when the window resizes. If you resize the window while the shaking is taking place, GSAP modifies the scale, even though scale is not part of the animation. Is there a way to purely animate x/y without touching other properties? I suspect the reason is that GSAP animates the transform matrix, instead of individual properties. Thanks, Sven
7. ## Timelines stopping randomly and infrequently

Hey Jack, If you want, I can get you a log in to the alpha of the game to see what I am doing Since the animation also causes sound effects and changes in alpha, I imagine that increasing timescale, while not rendering more frames, might cause more alpha changes per second and other things that could take more CPU/GPU. The callback skip wasn't on GSAPs side, but on my own. I had a timeout in place to debug other issues that was triggering when the computer froze up and simply stopped execution (called "debugger;") to aid problem analysis. But in this case it was a false positive. My game is completely un-optimized at this point. I am not moving a log at a time, but everything is rendered onto a 1080p display which is then scaled to fit. And my test set-up runs two of those side by site. Each card is rendered at 50% scale, too, to enable smooth up-scaling and good quality when z-lifting towards the camera. Each card consists of a few 24-bit alpha PNG layers as well as some SVG text with complex shadows for outlines. All-in-all I am not surprised that this is a touch job for the GPU. I've even run out of the 512MB of GPU memory my system has available in Chrome. I don't know about document re-flow, as it is a game, not a document. Almost everything is moved via transforms and positioned absolutely with 0/0 offsets.
8. ## Timelines stopping randomly and infrequently

Thanks for the explanation, it clears it up for me. I am starting to suspect the issue is more related to performance. I run the animations at 10x speed for testing purposes, and this causes frequent complete freezes of my whole computer. I had a timeout of 5 seconds on a move of the game to detect bad states, and that was getting triggered. I am running tests now with a longer timeout and only 2x animation speed. I still get occasional freezes, but it seems the animations complete now. The freezing is still a problem of course and I need to find away to optimize things, but at this stage I could not say if it's related to GSAP or not. Thanks for your explanations.
9. ## How can I inspect the current state of a timeline?

I currently have a problem with a "dirty" timeline. No matter what I do to it, I can not get it to play, even after clearing, etc. What properties should I inspect that might cause this timeline to refuse to play? It is not nested, and I have tried .clear() and .invalidate() as well as .startTime(0). In isolation, a fresh timeline works fine. I would like to know what properties I need to inspect to be able to identify the offending leftover data form previous use of this timeline, so I can learn more about how they work and how to clean one up. I am aware that I could simple throw it a way and use a new one, but ultimately I'd like to keep a record of all animations played on this timeline for later use to replay, etc. Thanks, Sven
10. ## Timelines stopping randomly and infrequently

Hi, I do not nest any timelines. Each Card component gets one simple timeline initiated like this: var timeline = new TimelineLite({paused: true}); An animation is added by looping through the tweens and adding them with timeline.to/timeline.set, and calling timeline.play() after all the tweens are called. In this case, for example, the card applies 18 animations successfully and then fails on the 19th. The 19th animation in this case does nothing special, just 2 or 3 .to() tweens. I am currently adding a timeline.call(function() {}) before and after adding the tweens for a particular animation, to check where in the animation sequence I got to. I am also calling a setTimout with the duration of the timeline after adding an animation's tweens to execute a timeout and find out when the animation fails. In the failure case, even the first .call was not reached. And the stats are as above. As a debugging step, I am executing this code now, before adding the problematic animation: timeline.clear(); timeline.invalidate(); timeline.startTime(0); timeline.rawTime(0); Should this not clean up and reset the timeline completely? UPDATE: Replacing those lines with timeline = new TimelineLite() does cause the animation to play correctly. So somehow the state of this timeline gets messed up. PLEASE HALP! ;( PS: After GDC Europe, if I do get funding for my game, I'd be highly interested in open sourcing my animation system build on top of GSAP and pushing it to a high level of quality with your help, perhaps. PPS: I sure would love it if there was a wiki/comment system on the docs. I'd amend them myself. For example, each time you reference event handlers, there should be a complete list of them that are applicable at that point, with documentation when exactly each one gets fired. For example, from perusing the source, I know that you do a lot of complicated edge case handling for 0 length stuff related to start/end handlers, etc. I think this stuff matters once you do more complex animations that require reliable operation.
11. ## Timelines stopping randomly and infrequently

Ok, I have some more data. Would really appreciate the help regarding the undocumented stuff... This is some timeline data logging from just before the troublesome animation is played: HANDLING pauseToDeckPlayer - totalProgress: 1 - totalDuration: 5.399999999999999 - totalTime: 5.399999999999999 - startTime: 9.251 - rawTime: 5.450000000000017 - isActive: true And here is some timeline data from after my timeout handler fires: - CardView.animate[pauseToDeckPlayer] > TIMED OUT after 1929.9999999999998 - duration: 6.199999999999998 - progress: 0.8709677419354839 - isActive: false - paused: false - time: 5.399999999999999 - timeScale: 10 - totalDuration: 6.199999999999998 - totalTime: 5.399999999999999 - startTime: 9.256000000000002 - totalProgress: 0.8709677419354839 - rawTime : 24.72999999999999 As you can see, some tweens have been added (totalDuration went from 5.4 to 6.2, and progress went from 1 to 0.87), but despite calling .play() the time did not advance, causing the animation to timeout later. What I don't understand is why startTime has a larger value then totalDuration, and what rawTime represents. UPDATE: I've added these lines to the beginning of the troublesome animation: timeline.clear(); timeline.invalidate(); timeline.startTime(0); And STILL it times out, this time with progress stuck at 0, paused = false. What can cause an animation to refuse to play?
12. ## Timelines stopping randomly and infrequently

Hi Guys, due to the complexity of my project, I am certain that solving the problem is easier then reducing the test case. A tween overwrite is unlikely, as I use a single timeline per card, and simply add tweens for each animation during the execution of the game. My long term goal is to have a timeline for the game to which timelines for each individual animation are added. So that at the end of the game, the entire game is captured in this timeline, and I can jump back and replay any part of it at different speeds. Right now, I am looking into how .isActive() is functioning and I am inspecting the undocumented inner values of your objects. It is unfortunate thaa so much of it is undocumented, which makes my work pretty tricky. But here is a snap shot of one case of the animation failing: - duration: 6.249999999999998 - progress: 0.872 - isActive: false - paused: false - time: 5.449999999999998 - timeScale: 10 - totalProgress: 0.872 - totalDuration: 6.249999999999998 - _startTime: 10.451 - rawTime : 10.090000000000003 - _timeScale: 10 As you can see, it seems that the _startTime and rawTime value are larger then the totalDuration, while totalProgress is less then 1. I presume that when this is the case, the call to .play() will be ignored and isActive will return false. What I am not sure about is the exact meaning of rawTime and _startTime, and when and how they can end up larger then the totalDuration of the timeline. I will go with the business license. I am hoping to be able to launch commercially in a few years, depending on how long it takes me to debug this!
13. ## Timelines stopping randomly and infrequently

Hi, I've output other values from the timeline, showing that it is neither paused, nor finished, but has started, yet is still inactive. Further testing by inserting various tween callbacks to track multiple animations applied over time during game play show that previous animations did not complete either, which might cause the issues. Is there a way of enabling any kind of debug logging from GSAP to throw errors or log into console if animations fail for some reason? BTW, I am layering an animation on top of GSAP, since you don't provide an easy way to store dynamic animations as a data format. So I am not dealing with GSAP raw, and there is no point to support multiple different ways of doing the same thing in my animation layer. Just to clarify, I am not suggesting there is a bug in your library. But there does not seem to be any easy way to inspect what is going on. For example, how does GSAP deal with gimbal lock, which was my suspicion yesterday? Thanks for your help. PS: I have asked elsewhere what the appropriate license is to pay for this support. Is "BusinessGreen" good for a single developer like me?
14. ## Timelines stopping randomly and infrequently

Hi, I am currently debugging an issue. It started with sometimes onComplete handlers not getting called. I've been trying to track down what/when it's happening. For a while I had suspected that a gimbal lock stopped the animation somehow. But I am not sure anymore. Currently I have a test timeline set up somewhat like this (pseudo code): .to(0, {onComplete: debug}) .to(0, {onComplete: debug}) .to(0.01, {onComplete: debug}) Which would cause debug to get called twice only. I added a timeout handler to capture this state. When I inspect hte timeline, isActive() returns false, but it is not paused or childed to another timeline. What else could cause a timeline to become inactive and how could I test for this? Unfortunately I still haven't been able to create a 100% reproducible case as this is part of a complex multi-player game. Thanks for your help.
15. ## "display" applied a frame before x/y updates causing "flashing" in single .set()

I've tried one more thing, which seems to work: .set({x: newX, y: newY, immediateRender: true}) .to(0, {display: 'block'}) I am guessing that this takes 2 frames to execute, though. I'm still curious why this works this way, and why neither a single .set nor two consecutive .set work as one would expect. It seems to me that all properties in a single .set() statement should execute in the same frame.
16. ## "display" applied a frame before x/y updates causing "flashing" in single .set()

Hi, I'm trying something like (pseudo code): .set({x: newX, y:newY, display: 'block'}) to both show an item and place it at a new location. But it flashes briefly at the old location, indicating that the display property gets updated one frame before the X/Y updates. Even though "set" shouldn't cause an animation, it seems to go through the animation system somehow. Is there a way to ensure the position is updated BEFORE the display property is changed? Placing them in separate .set() commands doesn't work. Regards, Sven
17. ## Draggable pause

Before getting technical when I have more time, I want to say a few things. 1. I'm often irate as I am under a lot of pressure to deliver a large project, quickly. My apologies. 2. You responsiveness in these forums are second to none. One of the main reasons I even bother to talk about certain things, as I actually feel you might help me out! 3. I could've sworn I had a paid license. I guess I was still testing GSAP out as I wasn't sure I'd be using it in the long run. I'll get one ASAP, as, even if I don't end up using it in the release, I definitely gained enough from it to make it worthwhile. And that also makes my "professionalism" statements unreasonable and rude Cheers, Sven PS: I am currently working around this issue by completely separating the Draggable component from the items getting dragged and using it just as an event source. The dragged item is currently an empty, invisible div at [0/0].
18. ## Draggable pause

Diaco, since it is different form 100% of all other APIs out there. If I disable a button, I expect no event handlers to fire for that. Are you saying that button.disable() should fire button.onClick ??? How does that make any sense? I am angry since you're giving me the run around wasting a lot of my time which I don't have much off. GSAP is sold as a high-quality, professional tool, but you seem to expect me to accept a much lower level of quality. (similar with browserify support, etc). I would happily accept this if you would not sell this tool so highly. It has the technical competency to be as great as you claim, but it's not there yet. IT wouldn't be hard to get it there, but not if you just refute everything anybody says and start arguments at every turn. It's more about removing non-standard behavior then adding features that would make this tool really great and of professional quality. Similar with other issues I have had with GSAP so far. Perhaps my project is a bit more complex then what GSAP is designed for, but you are selling it as a high-quality, high-power professional tool. I'm just hitting a lot of issues with your approach to API design. Remember, lists of features are not what count at the professional level. Reliability, predictability and security are just as important. Please note I am not using this in a traditional web environment, but in a complex game project. So I am looking at this as an application programmer (with decades of experience in using APIs and building them). To re-iterate: a .disable() method should DISABLE the object. NOT fire events!!! Similarly with the contextmenu hook I fell foul with before, if you see my other threads.
19. ## Draggable pause

Kinda busy preparing for GDC Europe. If I module-ize it, it'll go here: https://github.com/killroy42/
20. ## Draggable pause

I don't want to lock it. I want to disable it. Disabling, in English means that it no longer functions. Something that is disabled in programming traditionally does not do things such as firing event handlers. Once again, I have to implement a whole framework on top of a GSAP tool to manage a second layer of events to make disable actually act like traditional .disable() methods in other frameworks. At this stage I will probably end up not needing Draggable at all as I will have re-implemented most of its functionality in the end.
21. ## Draggable pause

Not sure what you need an example off. Just look at the srouce for Draggable.js: Line: 1986 this.disable = function(type) { The type is not mentioned in the docs. The next 20 or so lines mess wit ha bunch of event handlers and at line 2025, this: _dispatchEvent(this, "dragend", "onDragEnd"); executes onDragEnd. I'll start doing work for this as soon as you guys free some time up for me by working on my project, deal?
22. ## Draggable pause

Hi, Is there a way to pause a draggable? Basically I have a situation where I am dragging a card, and as I enter a certain area, I want to stop the card and start dragging a different draggable (with a crosshair). As I leave the area, I want to kill the crosshair and resume the card dragging. Right now, if I .disable() the first draggable it hides the visual AND executes onDragEnd, even though the mouse has not been released yet. At this stage I seem to be writing more code to work around Draggable's idiosyncrasies then it saves me from implementing stuff myself There is also an undocumented "type" argument, but it does't stop onDragEnd from firing. Regards, Sven
23. ## Properties in .set() not being set at same point in time

I think there are other animations being thrown onto the timeline as part of the animation system, pre-empting these. I am looking further into it and might have to implement an FSM for the animation system as well, to make it graph-driven instead of linear. I will let you know how it works out and if this was really the issue.
24. ## Properties in .set() not being set at same point in time

Please note that logging out \$(element)[0]._gsTransform shows the correct values for x and y, while the visual position of the item is as if x =0 and y = 0.
25. ## Properties in .set() not being set at same point in time

I have an animation that is supposed to start the element off at a particular possession view .set(), and then animated it to a new position via .to(). Currently, if I reload the page many times, perhaps 1 out of 7 times the item starts from x=0, y=0 instead of the values to which I have set it. The element starts out with display: none by default. I tried (in pseudo code): A) .set({x:1400, y:700, display: block, immediateRender: true}) .to({x: 1000, y: 600}) .set({x:1400, y:700, immediateRender: true}) .set({display: block}) .to({x: 1000, y: 600}) This is part of a larger animation system and very hard to extract a minimal case. But there is no code that should interfere with GSAP. The strange thing is, it seems to be a timing issue. And if the CPU is busy it seems to be more likely to happen. Are you doing some internal optimizations that stop the .set() command from getting executed all at the same time? It seems as if the display:block is executed before the updates to the x and y positions. hanks fro any help you may be able to give.
×