killroy

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.

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!

How cool! I had added cycle-like functionality in my wrapper for GSAP. Now I can remove it and convert to native usage!

Thanks, that's what I was looking for. I'll check it out!

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?

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

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.

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.

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

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.

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?

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!

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?

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.

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.