Help create slot machine using only Mantine Transitions | Mantine | Page 1

Trying to create Slot Machine, using only Mantine

The idea is have 3 images and when user press buttom, the transictions starts and ends with the specific combination that I will defined.

I started with

const slideTransition: MantineTransition = {
  in: { transform: "translateY(0)", transformOrigin: "top" },
  out: { transform: "translateY(100%)", transformOrigin: "bottom" },
  transitionProperty: "transform"
};

const CacaNiquel = () => {
  const [opened, setOpened] = useState(false);

  const { start, stop } = useInterval(() => {
    setOpened((state) => !state);
  }, 500);

  useEffect(() => {
    start();

    return () => {
      stop();
    };
  }, [stop, start]);

  return (
    <Box maw={200} pos="relative" style={{ display: "flex", justifyContent: "center", margin: "auto" }}>
      <Transition mounted={opened} transition={slideTransition} duration={400} timingFunction="ease">
        {(styles) => (
          <div style={styles}>
            <IconBrandAdobe />
          </div>
        )}
      </Transition>
    </Box>
  );
};

Any suggestion or help about how to implement this will be nice

#Help create slot machine using only Mantine Transitions