Transitions

[hjohnsick]

Is there a way to create a carousel type transition on the wizard so that when you click the button to go to the next step the previous step slides to the left at the same time the next step comes into view? I am using mui and this is what I have in my styles

import { makeStyles } from 'tss-react/mui';
import { keyframes } from '@mui/system';

const slideIn = keyframes`
 from {
    transform: translateX(200%);
 }
 to {
    transform: translateX(0);
 }
`;

const slideOut = keyframes`
 from {
    transform: translateX(0);
 }
 to {
    transform: translateX(-200%);
 }
`;

const useStyles = makeStyles()(() => {
  return {
    wizard: {
      overflow: 'hidden',
    },
    intro: {
      transform: 'translateX(0)',
    },
    exitLeft: {
      transition: '300ms ease-out',
      transform: 'translateX(200%)',
    },
    enterRight: {
      animation: `${slideIn} 300ms ease-out`,
    },
    enterLeft: {
      animation: `${slideOut} 300ms ease-out`,
    },
    exitRight: {
      transition: '300ms ease-out',
      transform: 'translateX(100%)',
    },
  };
});

export default useStyles;

This is how I am passing the custom transitions:

      transitions={{
        enterRight: `${classes.enterRight}`,
        enterLeft: `${classes.enterLeft}`,
        exitRight: `${classes.exitRight}`,
        exitLeft: `${classes.exitLeft}`,
        intro: `${classes.intro}`,
      }}