[joy-ui] Add animation/transition support

[siriwatknp]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently, Joy UI components do not have built-in animation or transition. Joy UI should provide an API or a guide to integrate with existing popular libraries:

• https://www.framer.com/motion/
• https://www.react-spring.dev/
• react-transition-group

Examples 🌈

No response

Motivation 🔦

Animation and transition is an important part in building modern web application.

[DIWAKARKASHYAP]

this will awesome for users , 👍👍👍👍

[marcpachecog]

Hi @siriwatknp what is the status of this issue? Thanks! :)

[siriwatknp]

Hi @siriwatknp what is the status of this issue? Thanks! :)

Thanks for asking. Our priority at this point is to add more components to the same level of Material UI. We will then look into transition/animation.

Anyway, we could start researching the possibility of having a theme plugin that enhance common transition to components, for example, the toggle switch. The usage could look like this:

import { CssVarsProvider, extendTheme } from '@mui/joy/styles';
import { bouncy } from 'some-joy-community';

const theme = extendTheme(bouncy);

<CssVarsProvider theme={bouncy}>
  <App />
</CssVarsProvider>

[oliviertassinari]

Currently, Joy UI components do not have built-in animation or transition.

Ah yes, awesome! I feel that there is soo much potential for adding animations and transitions to the default styles of the components. These are most of the time simple CSS transitions which theme.transitions.create() should already get us covered, in the same way, it works in https://tailwindcss.com/docs/transition-property. So I think it's simply a matter of adding the CSS.

Joy UI should provide an API or a guide to integrate with existing popular libraries

Right a bit more complete. But I think this should be done as a second iteration, it sounds much less important than the point above, e.g. Material UI uses a Fade component while in https://ui.shadcn.com/docs/components/alert-dialog, it's done directly with CSS.