Animating With KnockoutJS

[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

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

Unfortunately this seems to be a Knockout issue and not a GSAP problem. What exactly is the problem? couldn't tell, I don't know the first thing about Knockout, but is definitely causing an issue, or at least you need to create more code in order to solve this.

 

What I can see is that there's a slight movement upwards before the element slides to the left. If you position the button more to the right, you'll see that as soon as you click on the button (second click or more) the element that previously was slide to the left goes to the bottom of the container, so to speak, creating that little jump.

 

Another thing that I noticed is that it keeps creating DOM elements without removing or recycling the ones that were already on the DOM. I updated the fiddle so you can see it, after the first click, scroll a little to the right and you'll see it:

 

http://jsfiddle.net/3ucVg/3/

 

What you could do is check why there are more and more elements every time you reach the last item of the array and solve that and see why the previously animated element goes to the bottom of the pile, so to speak.

 

Rodrigo.

[davertron]

 

 

What exactly is the problem?

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.

 

 

 

Another thing that I noticed is that it keeps creating DOM elements without removing or recycling the ones that were already on the DOM.

 

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.