React-responsive-carousel: `animationHandler` prop not working?

[justindasilva]

Hello, I've tried setting animationHandler="fade" and the Carousel still seems to slide.
Is there a known issue?
Am I missing something maybe?

[oozie]

It looks like the story doesn't work as expected: http://react-responsive-carousel.js.org/storybook/?path=/story/01-basic--fade
Could this be a regression?

[mideus]

I'm having the same issue. Is there any update? The animationHandler prop isn't even listed in the available props section.

[bagirimana]

Fade effect also doesn't work here

[theo-ford]

Also having the same issue, would love a fix.

[gdoudeng]

+1

[zippihero]

We discovered this repo for this annoying issue. Currently the structure of lib/carousel is broken.

When importing carousel component replace this:
import { Carousel } from "react-responsive-carousel";

with this:
import Carousel from "react-responsive-carousel/lib/js/components/Carousel/index";

please fix in future release 👍 thank you

[adrenaline681]

Any fix to this fading issue?

[piosystems]

Still wondering if there is a fix for the fading issue.

[maxfahl]

I'm trying to create a custom animation handler, but the prop does not exist. This costomization ooption was the reason I went with this component. I guess I will have to create my own slider.

[HarenaGit]

import Carousel from "react-responsive-carousel/lib/js/components/Carousel/index";

Thank you, changing the import path works as expected.

[ZahirHashemiNasab]

We discovered this repo for this annoying issue. Currently the structure of lib/carousel is broken.

When importing carousel component replace this:
import { Carousel } from "react-responsive-carousel";

with this:
import Carousel from "react-responsive-carousel/lib/js/components/Carousel/index";

please fix in future release 👍 thank you

this solution is not working with typescript.
is there another way for importing that ?!

[marta8919]

On my side changing the path was also not working, so I found another possible solution, the onChange method will be triggered every time the index changes, so, every time the index changes I add a class to the whole div that has a fade-out effect, and reset it.

`export default function CarouselComponent(props) {

let [transition, setTransition ] = useState('width-carousel')

const handleTransition= ()=>{
    setTransition('width-carousel fade-in-image')

    setTimeout(()=>{
        setTransition('width-carousel')
    }, 2000)
}


    return (


        <Carousel
            autoPlay={true}
            showArrows={false}
            showStatus={false}
            showThumbs={false}
            infiniteLoop={true}
            onChange={handleTransition}
        >

            {
                props.array.map((one, index) => (
                    <div className={transition} key={index}>
                        <img src={one.img} className={"registration_image"}/>
                        <div style={{maxWidth: '400px'}}>
                            <h3 className={'carousel-header'}>{one.header}</h3>
                            <p>{one.text}</p>
                        </div>
                    </div>
                ))
            }

        </Carousel>


    );

};`

`.fade-out-image {
animation: fadeOut 3s;
-webkit-animation: fadeOut 3s;
-moz-animation: fadeOut 3s;
-o-animation: fadeOut 3s;
-ms-animation: fadeOut 3s;
}
@keyframes fadeOut {
0% {opacity:0;}
100% {opacity:1;}
}

@-moz-keyframes fadeOut {
0% {opacity:0;}
100% {opacity:1;}
}

@-webkit-keyframes fadeOut {
0% {opacity:0;}
100% {opacity:1;}
}

@-o-keyframes fadeOut {
0% {opacity:0;}
100% {opacity:1;}
}

@-ms-keyframes fadeOut {
0% {opacity:0;}
100% {opacity:1;}
}`