Posts posted by davertron
I'm having trouble getting the effect I want when animating li items in a list. It seems to work fine if I only animate one li item at a time, but as soon as more than one item is animating, things get really janky. To see what I mean, try the two fiddles listed below. To see the effect I want, quickly click the 'slide' button. In the first fiddle, you'll notice that the second li item animates naturally and things happen as I would expect. In the second fiddle, you'll hopefully see what I mean; it's like the first animation just stops completely and the second one starts up halfway through and is really jarring:
http://jsfiddle.net/davertron/3ucVg/ <-- This is how I want it to work
http://jsfiddle.net/davertron/3ucVg/1/ <-- This is what I'm getting instead
Animating With KnockoutJS
Sorry, I should have done a better job explaining. In the first example, if you double click the slide button really quickly, the top element starts animating to the right and then the second element starts animating to the right as well, exactly as I would expect (i.e. they both just start moving to the right, but don't move up or down at all).
In the second example, you see the weirdness that you're describing, where if you just click once and wait for the first element to be done animating it works fine, but if you double click, the top element moves to the very bottom and the second element starts animating normally.
I created the first example without knockout because I suspected it was the problem, but I just wanted to make sure.
Yeah I'm not sure why it's doing that, this is exactly the sort of thing that knockout is supposed to do for you to make these sort of manipulations performant.
UPDATE: I am sure why it's doing that actually; when you use beforeRemove etc. with knockout, you are responsible from removing the element from the DOM, since you're controlling animation etc. and there's no way for knockout to know when you're finished. Doesn't explain why the currently animating element drops to the bottom when the second element begins animating but might be useful for someone else to know.
Anyway, thanks, I'm glad to hear it's not an issue with GSAP as I'm really happy with GSAP's API in general and don't want to change it. I'll have to see if I can re-work the knockout pieces to see if I can find a solution.