Modal : new animation for custom placement

[skouf]

Hello

Using the extendVariants() function, I have created a new placement called "side-right".

const Modal = extendVariants(ModalNextUI, {
    variants: {
        placement: {
            "side-right": {
                wrapper: "justify-end items-stretch sm:items-stretch ",
                base: "mx-0 sm:mx-0 my-0 sm:my-0 max-w-2xl h-full max-h-screen",
                header: "p-8",
                body: "p-8 pt-0",
                footer: "p-8"
            }
        }
    }
})

I have created a new motionProps in my Story in Storybook to have a right to left appearance for this placement.

motionProps: {
            variants: {
                enter: {
                    x: 0,
                    opacity: 1,
                    transition: {
                        duration: 0.3,
                        ease: "easeOut",
                    },
                },
                exit: {
                    x: 50,
                    opacity: 0,
                    transition: {
                        duration: 0.3,
                        ease: "easeOut",
                    },
                }
            }
        }

But now, I want this motionProps to be set only if the user sets the placement prop to "side-right"

How can I do that ?

Thanks for your help :)

[alphaxek]

Hi @skouf, you want to have this new variant in your personal project or you are looking to contribute to NextUI?

[skouf]

Hello @alphaxek. It's for my personal project :)