Tricky Filterable list animation

[chrisk2020]

I have a design I am trying to translate into an animated element. The design dictates a few things I am struggling to achieve nicely with GSAP. (I'm sure this is due to my brain and not GSAP).

 

First up here is a codepen of what I'm trying to achieve with no animation just using .show() and .hide() :

 

It is a filterable listing of floors of a building showing apartment types by bedroom number. If a floor has no children it is hidden completely and the first floor listed has no top margin.

 

here is my first attempt using GSAP to add some animation:

See the Pen GZBLVj by chrisk2020 (@chrisk2020) on CodePen

 

I'd like to know if the approach I'm using with multiple timelines is a good one? - it seems to be getting quite complicated and not particularly DRY, but that might just be my synatx?

 

I'm also not sure of the best method to calculate heights including padding, borders and margin and have had to rely on 'magic' hard coded numbers to compensate in the height calculations. This might be OK, but I'm also at a loss as to how to gracefully cope with the 0 marginTop on the first list item title - as in getting it all moving smoothly to the eye.

 

I've been trying to find the best way to get this feeling nice and solid and would really appreciate some pointers.

See the Pen NNomGz by chrisk2020 (@chrisk2020) on CodePen

[chrisk2020]

I've continued to work on the above problem and have something that more closely resembles what I'm after - 

See the Pen yOwBXJ by chrisk2020 (@chrisk2020) on CodePen

 

I'm still getting a 'jump' in certain places - I think due to the animation of the margin.

 

Am I missing something about animating the margin property? or have I misdiagnosed the cause of the jump?

 

Thanks in advance.

[Carl]

Thanks for posting the demo and reporting your progress.

 

Unfortunately it is just too complex for us dig deep into to try to figure out exactly what is happening. With all the conditions, multiple timelines, and jQuery things going on its a lot to dissect with fresh eyes. The good news is that it seems like you are pretty close.

 

In order for us to best help we really need to focus on issues that are closely tied to the GSAP API. If you can create a super simple demo that shows just one use case that you are trying to solve it may help us in providing a solution. Something like : "click this button to remove 2 elements and tween to the new height". 

 

 

I would suggest studying this post and the examples. http://greensock.com/forums/topic/10637-animating-height-auto/

They deal with ways of tweening to and from heights that change based on size of content. I'm confident the same concepts can translate over to what you are doing.

[chrisk2020]

Thanks Carl. I did kind of think that was the case which is why I'd also included the example 'pre gsap' I had tried to reduce the codepen! I'll carry on and keep any support requests focussed.

[OSUblake]

Check out this thread for toggling animations.

http://greensock.com/forums/topic/13268-how-to-toggle-tweens-in-a-dry-fashion/

 

You can use those techniques to filter stuff, like even/odd in this demo...

See the Pen eJONMN?editors=001 by osublake (@osublake) on CodePen

 

...and height

See the Pen JYQqZr by osublake (@osublake) on CodePen

[chrisk2020]

Hi OSUblake - thanks for the excellent demos and clear explanations on the posts linked.

 

I've started to put something together based on the techniques in your demos:

 

See the Pen pyBGLv by chrisk2020 (@chrisk2020) on CodePen

 

I'm trying to use a callback to apply a tween to all the '.apartments' that are NOT filtered - ultimately to fade them out, but in the first instance to change their colour. It's not quite working as I expected - I'm guessing that it has something to do with the 'parent' tween toggling on the reverse, but the callback tween not being aware of that state? Would that be the case?

 

Is there a better way to toggleAnimations on selected elements that are NOT the target element(s) its self?

 

Edit:

I've made a bit more progress here: 

See the Pen aNxMKa?editors=0010 by chrisk2020 (@chrisk2020) on CodePen

I think my logic must be off somewhere though because the tweens are triggering on multiple clicks of the button. ie. the first filter click hides everything, then the second filter click filters seemingly pretty correctly - though if the correct filter is shown I'd like to disable the toggle.