Shuffle / Filter

[Adam]

https://www.kunkalabs.com/mixitup/

http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle?_k=k0imql

I'm looking to implement something like the plugins above using ractive... but can't figure out have to animate the items when they're re-order or filtered out.

Any suggestions?

[Chris Reeves]

It's not too hard as long as your items are a fixed size along each axis of movement. You can position absolute, assign each an index (or two for grids) that is multiplied by the fixed size to position, and let a css transition handle the easing when the assigned index changes. You can even do it with ractive.animate if you can't depend on css transitions.

I'll see if I can put together an example later.

Thanks, Chris

--
You received this message because you are subscribed to the Google Groups "Ractive.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Chris Reeves]

Here you go: https://ractive.js.org/playground/#N4IgFiBcoE5SBTAJgcwSAvgGhAF3gDxICWAbgATFIC8AOngIYxq70B8BA9CaW7QHYCCAZwDGMYgAdclGvVwIAtpIA2DBfXK4AnpIR08CAB65OMBqNxkE7AbVwEARgFdcuAPb9yngLSiVxKIA1gYAAgB0AFbOio4qCAAUAJTsAFIxcQhcLm6efIIOPOT+DMLCBqKeuAzE-AgwtgX2wMAAxAgWYJQKisIYGHashWTFamUGxD2awjrxPh6SBi3htUjG5ABU5AkAfpxgCMQoYDIA1OR7ikwotUn9kkbTswg+B0cnS8B7b8e4948gfL2YEOMAAFjYyysuHi-S44KBQ3sBEkkOA4UkMAQpGICAA7nDOKjBsjuGREc1gJwOqIwP1BlwePkuGIJNI2CAcMJ4KQmORzJZrORqOQ6njyAAlCxWUiJYCDarMBC4SDkADkrUVLDVWAVSlU6gQqo1PQNCh1gyQ6gYqvlTVwPxOqoAjAAGV1YchXZi1VUAVl19smSmEqoA2iShsBKPw1kZVR6tJN4saAMruRQIchMKz+LMMRzuVzkGbOABmZZ15Ex2NxeONADl3OKHcRhJR2wwvDnAvFsyoVNnC8WwM2tAdhFnW-wUO2WOQywFJHokNnY+RorF4qumEXY2ryNhI80Y3GXZ7oSn1enM9mYLm+wWizJSxWqzWcfjG2PW+222u7wffMByHZ9yFHFsJynMBalnch50XKQVzXVdN0yHcYD3JADyPe0T1WYxVQAJgvZMjWvDN83vXt82HF9cHLStPQ-Otv0g-9-y7QCaP7QcnxHH8oPHWC52VBcl2QrtUIybc7ywnDAxBfDY0I8gAGZSJhci1RvKigNA4tXyY6ssU-et1Sbdi-07btqLzXiDJkCDxwQSdhJnUSZEQ5dkBQjcZN83dnH3Q9FKRXBowI+NyDBTSrx0yjuPs-j6MY99TNYizBI4myksfECUvAwTXOgkT4LE7zJPXNDZKCkLcKUiLT1UgMky0tNEp7ZK6JLBi32YjKvyyqyOwArr8r4nrnIdEr3LghCJMC6qAow+TQsjABdQYGtwGryLLYLBU8ZJyDtEFeRgcgjHbEUxXIABBGBzG0BJf3CFgEjVYNenCeIZwdNUkiScIy2IAcEldYGrkkBIDv4I7+ASUhPWIJJTv5ZVnBgLxiAAbkPJJccja7wmEdx71hw6rGOhhPUcNGzvC4gy22ABZdQwHCTDgqQBJ2YdLmpIzZI0eoMXyEhjGGOx8gfGdIm8NwLFpa8eXIwwQnj3tC6S2VKwZ2FU6MAVkESbLcmAFFOkp+HqcR5HKAZ49cEnNxYLDL6emEcID3OYhyHONUVhUow1Q2w3SBNoYNaj4F7Te12Eld-WUE1goBn4GPORAUR4BORRB0ZxwLCCFBudjPx3BUcnVQCX44mcBAFYzgRwkqfhqlqepTsGSR3GESZiE8VUsTUGUm8Gb0bn4eZ3EkYilGbux+BWHoe4KPuB7t1UCzJlRXAngpCxgNYYBdB4SyrqhyFaBg76jwsjB8YQwAYJBm3PoxyGdC+wQv5hi4Q09ImEB4Q-Rp3sHiKgDoXTugAKRR0kG-EgM4ExgMXoMR+z9iAAC9YKqmPqfHwj8o5Ky7FvIe-BVQLAlmA9sHRJw+FqD4Z8D8S5lywpXauZ8b5lgAJz8P4c3TAQA

Thanks, Chris

[Adam]

Makes sense. How would this work if I actually need to filter the array. I'd need access to the old dom elements before they're removed and any new dom elements to animate them in/out.

Thanks, Chris

Thanks, Chris

To unsubscribe from this group and stop receiving emails from it, send an email to ractive-js+...@googlegroups.com.