Fade Speed

[skillmatic-co]

Would be great to be able to set the fade transition speed, similar to how you can set the speed of the slider with selectedAttraction and friction.

[desandro]

Funny you should ask because this exactly how fade transition speed works: with selectedAttraction and friction options. Flickity is hard-wired for sliding interaction, so there is no option to set a transition speed to a time duration though.

[skillmatic-co]

I tried those, but they didn't seem to do anything for fade speed.

[richgcook]

@skillmatic-co If you set the selectedAttraction to something like 0.001 you can see the difference. I'm unsure what friction would do for a fade but selectedAttraction definitely works 👍🏻

[tedw]

FWIW, while adjusting selectedAttraction and friction works, I think using CSS for the fade effect would make it easier and more intuitive for people to adjust the timing and easing, and potentially more performant. If I ever get some free time at work I can try to submit a PR (unfortunately, that might be a little while).

Anyway, thanks for adding the fade functionality! 🎉

[RitchieVincent]

For now if you want to set it yourself using CSS, set opacity: 0 !important; on all slides and opacity: 1 !important; on the selected slide. You can then use CSS transition timing to adjust it to how you want.

[mrspence]

Perhaps worth noting how to adjust timing: you can manually create animation keyframes and adjust their timing like below (change ease 0.2s to your preferred timing)

// Using SASS

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

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

.slide {
    opacity: 0 !important;

    &:not(.is-selected){
        animation: fadeOut ease 0.2s;
    }

    &.is-selected {
        z-index: 99;
        opacity: 1 !important;
        animation: fadeIn ease 0.2s;
    }
}

(I needed z-index, may not be neccessary for you - I haven't had time to see if this is from my own conflicts or not)

[mentiondev]

I use the following css with the fade option to make it smoother. As can adjust the speed and transition style then.

.carousel-cell {
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
    width: 100vw;
    height: 100%;
}