Tips for building a carousel

[ianschmitz]

Hey there,

I'm hoping you could offer some guidance with building a carousel like component using react-flip-toolkit. For reference, here is a POC to try to show what i'm trying to build: https://codesandbox.io/s/qlqwkp9524. If you feel this isn't the right forum for this question, please let me know!

I've been trying to control the animation of elements as they enter/exit the list. You can think of it similar to a typical image carousel component. I have got things sort of working by using a combination of react-flip-toolkit and anime, however this combination feels a little unnatural, as it seems like it's something i should be able to accomplish using this library.

The issue i'm having is animating elements into position. It's quite tricky since the animations are triggered based on the flipKey value, which i'm changing every time the visible elements in the list change. I can't quite come up with a solution that is able to specify a "starting" position for the entering element, or the "exit" position for an element that is leaving, without involving anime.

My desired behavior is somewhat as follows:

• When changing from 1 => 1,2, panel 1 should shrink from 100% to 50% width, and panel 2 should slide in from right

• When changing from 1,2 => 2,3, panel 1 should exit left, panel 3 should slide in right

• When changing from 2,3 => 1,2, panel 3 should exit right, panel 1 should enter left

My example with the shrinking from 100% to 50% width is fairly specific, however my thought is that if we come up with an elegant solution for the generic carousel case, then perhaps others could benefit by us building a carousel example to show controlling the entering/exit of elements as they move through the carousel.

Thanks 😄

[aholachek]

Thank you for making this issue, I have to think about it a little bit. My original reaction was that it made perfect sense that you need to use anime for entering and exiting animations, since those are not FLIP and thus not the responsibility of the library, which just gives you the hooks to set those animations up yourself. But maybe there is a smarter way that the library could offer pseudo-FLIP for entering and exiting elements, that would obviously make this use case a lot easier. I'll look at it this weekend and get back to you.

[ianschmitz]

Thanks for your quick response @aholachek!

Reading your reply makes total sense to me -- you're right it isn't really FLIP in the sense that the element isn't rendered yet, however we could apply the same FLIP principals to animate it from its initial starting point (out of view) into its final resting place. I totally understand if this use case doesn't fit in with the vision of this library though. Please don't feel the need to shoe horn in anything if it doesn't line up with the rest of the library.

Let me know if you come up with anything!