element fully transitions out before next transitions in // glitchy transitions

[staswerno]

Stack:

"react": "^17.0.2" "@mui/material": "^5.2.5" "react-material-ui-carousel": "^2.3.7-mui5"

I'm using the aforementioned version of the carousel, as the component often does not render using the version created by the standard npm install.

With this version of the install, the current element fully fades/slides out, revealing whatever is behind it (in my case a plain color background), before the next element fades/slides in. This is in contrast to the standard install, where the current element smoothly fades/slides into the next (with slides, this gives the desired effect that the elements are 'glued' together).

Here is my code:

import { Card, CardMedia, Grow, Paper } from "@mui/material";
import space from "./images/space.png";
import octavia from "./images/octavia.png";
import playing from "./images/playing.png";
import Carousel from "react-material-ui-carousel";

export default function DrawingCarousel({ inViewA }) {
    return (
        <Grow in={inViewA} timeout={900}>
            <Card sx={{ maxWidth: 527 }}>
                <Carousel
                    animation={"slide"}
                    duration={1000}
                    interval={3000}
                    indicators={false}
                    navButtonsAlwaysVisible={true}
                >
                        <CardMedia
                        component="img"
                        height="100%"
                        image={playing}
                        alt="space drawing"
                        // sx={{ maxWidth: 527 }}
                    />
                        <CardMedia
                        component="img"
                        height="100%"
                        image={octavia}
                        alt="space drawing"
                    />
                    <CardMedia
                        component="img"
                        height="100%"
                        image={space}
                        alt="space drawing"
                    />
                </Carousel>
            </Card>
        </Grow>
    );
}

It is also worth noting that the page will sometimes, but not always 'glitch' during the transition from one element to the next.

Thank you!

[Learus]

Hello. This issue is one of the reasons that version 3 exists in the first place. I couldn't figure out a way to make it animate smoothly using the MUI animation system, so I had to move over to framer/motion.

Sadly, the only thing I can tell you is to wait for the bugfix on the "often does not render" issue.

[staswerno]

OK thank you. I tried isolating the version 3 carousel right down to bare bones elements withour interference from other components and it was still often not rendering, so I'm hoping that a fix can be found, really love the carousel. Thanks Learus!

[Learus]

I'm closing this issue. Animation issues in version 2 are not going to be fixed, since version 3 takes care of them. As per the last comment, other issues are reporting the problem. (#139)