Fade transition?

[rawcreative]

While it's obvious that flickity is meant to be based on a sliding transition, I was curious if there's any plans on implementing an optional Fade based transition/animation instead of the slide?

I would love to replace my current hand-rolled image galleries/carousels with flickity in my projects both personal and commercial, but many of them use fading transitions instead of sliding. I'd be more than happy to pre-pay for a commercial license/donate/whatever if it helps that get implemented.

[desandro]

Add a 👍 reaction to show your support for this feature. Do not add +1 comments — They will be deleted. Subscribe to the issue using the button in the sidebar.

---

Hi! Thanks for this feedback. No, I do not have plans to add fade transitions to Flickity. This seems like a simple feature, but it would be complex to add. Flickity is designed to work with cells that are laid out next to one another.

If fade transition is a must have featured, I recommend Slick by @kenwheeler, or RoyalSlider

[hellojebus]

This would definitely be a cool option. I've used Slick and it is a great alternative. I'll stick to Flickity in the meantime though.

[hydrotik]

:+1: You might consider a feature comparison with Slick as it's a bit unclear what the justification would be to move from the MIT license of Slick to a commercial license with Flickity?

[desandro]

After consideration, Flickity will not add fade animation. Flickity is all about sliding. Fade transitions are a different pattern that would require a lot of re-tooling. Use Slick or RoyalSlider instead.

[hydrotik]

We have been using Slick for some time already. With the great experiences we have had with Isotope, we were excited and quick to explore moving to Flickity with the corporate license. Again, it would be nice to understand the difference between the two (and anything else that is comparable) in making a determination on what will ultimately add more value.

[hydrotik]

Also thought I'd include this in this thread as you took the time to write a thoughtful post on the metafizzy site about the value of the product which I found after my previous comment.

http://metafizzy.co/blog/flickity-v1-released/

And a somewhat related thread on a previous license question https://github.com/metafizzy/flickity/issues/20

[FabianGabor]

If it would be an option to set the slide transition time or completely disable the sliding, the fade animation could be easily solved with css opacity transitions, no need for jquery.

[wgstjf]

+1 on the ability to fade even if it uses css as per @FabianGabor suggestion. With that in place I know I would be able to achieve all my clients' site design requirements with one great 'slider'.

Cheers,

Will

[inlikealion]

+1

[josephbergdoll]

+1

[terkelg]

+1

[StefanEndress]

+1

[paul-straetmans]

+1

[baoagency]

+1

[eikeco]

+1

[aaronstezycki]

+1

[aaronstezycki]

So I've managed to hack around this, and it might be a 'omg don't do that' situation, but meh, I'm not bothered. Here's how I did it (CSS Only):

.flickity-slider{ transform: none !important; }
.slider__item{
    left: 0 !important;
   opacity: 0;
   transition: "opacity 0.3s ease-in-out";
}
.slider__item.is-selected{
    opacity: 1;
}

Voila

[eikeco]

I have taken @aaronstezycki example and reproduced it here: http://codepen.io/eikeco/full/MwGRKr

It certainly works but I would still recommend Slick or RoyalSlider as @desandro mentioned in his initial reply.

That said, it's a good hack @aaronstezycki :)

[lmartins]

Nice. @aaronstezycki suggestion seems like a viable solution for single item sliders. Would love to have this feature built in in Flickity, so that I can use just one plugin for all my sliders. Will give this solution a go.

[dustinhorton]

+1

[paulmasek]

+1

[mdmoreau]

The CSS trick seems to work really well @aaronstezycki - nice! The only thing I noticed is that you'll probably want to add a z-index: 1 to .slider__item.is-selected so you can interact with the active slide.

[eikeco]

@mdmoreau I have updated the demo here: http://codepen.io/eikeco/pen/MwGRKr

I set hidden slides to have z-index: -1; and .is-selected to have z-index: 0;. Setting .is-selected to z-index: 1 covers the navigation items. See demo above.

Thanks for the tip :)

[mdmoreau]

Looks good @eikeco - will probably have to adjust the z-index on a per project basis as adding a background to .gallery breaks that change and only using what I suggested messes with any overlapping nav. Either way looks like a promising workaround generally - appreciate the discussion!

[samuelwill]

+1

[TiagoDeSousa]

+1

[Tumki]

Thnx @aaronstezycki & @eikeco. Exactly what I needed. With a simple transition, you can even animate the text in and out:

http://codepen.io/Tumki/pen/JXOyvp

[mom6x]

@eikeco or @aaronstezycki is it possible for the "autoPlay: true" option to work with this css? When I implement the css, the fade transition works great, but the autoplay stops working. Sorry, I'm really new to this!

[desandro]

Add a 👍 reaction to show your support for this feature. Do not add +1 comments — They will be deleted. Subscribe to the issue using the button in the sidebar.

[JiveDig]

Thumbs up added to the OP.

[dallanlee]

Edit: Ignore this as I have since changed my mind about wanting fading implemented at the plugin level.

Original comment: I love Flickity for all of it's original capabilities. But I am also requesting this feature because on some projects I want a Flickity carousel to function as a traditional sliding carousel up to a certain breakpoint (1024px) where it would then transition with fading and not sliding. So I'd like both functionalities for a single carousel object. I moved from Slick carousel to Flickity a while ago even though Slick is good, Flickity is better and I only want to use Flickity in my projects. I hope this feature has enough demand to merit its implementation.

[maimairel]

I really hope the fade feature added to Flickity making it the last plugin for showing/hiding items you'll ever need. Currently there's no plugin that controls the item sizes 100% via CSS. There are, but none of them has advanced features like Flickity. All other plugins controls the item sizes explicitly by specifying width/height on items.

[dallanlee]

UPDATE: I've removed my thumbs up to the OP and no longer add my vote to wanting this feature added at the plugin/library level. CSS approaches, such as the ones exampled in previous comments here and variations of them, are acceptable solutions, IMO. I am able to even do a crossfade so that the transition between slides blends the two opacities together. This can also be controlled at media breakpoints and only requires CSS. I'm just posting this because I think the CSS approach is totally acceptable and want to let others know.

[callumflack]

@dallanlee all CSS techniques I've seen have a flash. Have you got a technique that doesn't?

[dallanlee]

@callumflack My development is currently just local so I'd have to create a Pen or something. I'll see if I can make some time.

[dallanlee]

@callumflack So I'm not sure what flash you're talking about but here's a Pen of what I'm basically doing with the carousel (which slides on small screens and fades on medium-and-up screens): http://codepen.io/dallanlee/pen/PmqEQE?editors=1100

[gingersoulrecords]

@dallanlee In carousel fade transitions, the 'flash' is the brief moment when both elements (one fading out, the next fading in) are at 50% opacity, therefore allowing some 'light' from the background to show through and creating a brief flash. This is noticeable on lighter backgrounds.

I've found few carousels that do this right. One is Patrick Kunka's EasyFader script which I forked here:

https://codepen.io/gingersoulrecords/pen/BZzEzR

To do this with Flickity, I think you'd need to set opacity values of hidden elements after slide transitions had been completed, and then manually transition them to 1 after their z-index jump.

It's doable - but I'm struggling a little, going to keep trying.

DB

[dallanlee]

@gingersoulrecords I feel like that's design/CSS-related and not slider-function-related, if I'm understanding correctly.

If you don't want white between transitions, you change the background color, which I'm sure you understand. But if we're talking about slides with images and you want the images to cross-fade and eliminate a flash of any background color, you set the CSS to do so with z-index and opacity transitions so that there's never less than 100% combined opacity between the images.

I've updated my Pen to demonstrate that fading can occur without ever seeing the background color of parent elements (when using cross fading on elements with colored backgrounds, be it block elements with the appropriate CSS or images). You can look at lines 210-221 in my SCSS. The z-index changes from 1 to 2 once active. And the transition function for the opacity is the same for all slides; except that the active slide starts without a delay—unlike the non-active slides. This ensures that the images have at least 100% combined opacity during the fade transition and therefore we don't see any background of the parent element(s). There is never less than 100% opacity between the two slides.

Let me know if I'm missing something!

Link to the Pen again: https://codepen.io/dallanlee/pen/PmqEQE?editors=0100

[gingersoulrecords]

@dallanlee excellent work. I totally forgot about using animation-delay...

Could you apply your workaround to something simpler, like this pen?

https://codepen.io/eikeco/pen/MwGRKr

[dallanlee]

@gingersoulrecords Fork: https://codepen.io/dallanlee/pen/GEjWpo

[gingersoulrecords]

@dallanlee Very slick, I think that should take care of most people looking for a flash-free fade.

[gingersoulrecords]

No pun intended there (slick).

[featherbelly]

@dallanlee that is a great little solution!!! You never know when a client want to lose the slides and switch to fade!

[leenasekhar]

@dallanlee Please help me with implementing the same in the case of a vertical carousel. I am using slick slider. I couldn't find examples on vertical carousels with fade in / fade out effects and disabled vertical movements of slides so far.

[dallanlee]

@leenasekhar I don’t understand. You want a solution like this but for a Slick carousel implementation?

[leenasekhar]

@dallanlee Yes! You are right.

[dallanlee]

@leenasekhar Sorry but I haven't used Slick in a couple years because of a couple limitations. If you have a CodePen for me to look at to get started, I may be able to find some time to tinker with it.

[desandro]

I'm re-opening this issue to gain more feedback.

[gingersoulrecords]

@desandro I've used @dallanlee 's solutions to construct a few instances of fading carousels (for things like testimonials on more fade-y, elegant layouts that don't want quick movements). What other kinds of feedback are you looking for?

[eikeco]

@desandro here's a visual example of what I think we are asking for (based on @aaronstezycki solution): http://codepen.io/eikeco/full/MwGRKr

Of course, it's a hack. I'm not suggesting this is how you implement the feature.