asmyshlyaev177/react-horizontal-scrolling-menu

Ability to animate children

Closed this issue · 10 comments

Deutrix commented

I am trying to create animated effects on children but Formkit AutoAnimate or React Flip Move requires to have a ref on parent or parent wrapper which is not possible in this case.

Tried creating one wrapper with the children then two at the sides and it's working but not so good.

Do you have any suggestions?

asmyshlyaev177 commented

Hm, that an interesting issue, let me think about that.

asmyshlyaev177 commented

I can make it work with AutoAnimate, just need 1-2 days to update tests and check it.

Deutrix commented

Amazing, thank you very much. I will test it today.

asmyshlyaev177 commented

Seems like shuffle animation doesn't work, maybe will figure it out, it requires a bigger change.

Deutrix commented

Tested, it is flashing during animation.

This is an example how it works with those three elements: https://deutrix.digital/JiLu4/YIbajAhu06.mp4

<div className="x-flex x-w-1 x-flex-row"></div>
<div
    className={cn(
        "x-flex x-flex-row",
        sizes[size],
    )} ref={animationRef}>
    {children}
</div>
<div className="x-flex x-w-1 x-flex-row"></div>

This is 6.1.0 version with ref on the ScrollMenu https://deutrix.digital/JiLu4/kizoYEME76.mp4

asmyshlyaev177 commented

Tested, it is flashing during animation.

This is an example how it works with those three elements: https://deutrix.digital/JiLu4/YIbajAhu06.mp4

<div className="x-flex x-w-1 x-flex-row"></div>
<div
    className={cn(
        "x-flex x-flex-row",
        sizes[size],
    )} ref={animationRef}>
    {children}
</div>
<div className="x-flex x-w-1 x-flex-row"></div>

This is 6.1.0 version with ref on the ScrollMenu https://deutrix.digital/JiLu4/kizoYEME76.mp4

I see, created issue in auto-atomate, but probably will end up removing Separator elements from my lib.

asmyshlyaev177 commented

@Deutrix Refactored it, working correctly now, check out a new version.

Deutrix commented

@asmyshlyaev177 Thank you. Works perfectly.