New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fade transition? #26

Closed
rawcreative opened this Issue Jan 29, 2015 · 67 comments

Comments

@rawcreative
Copy link

rawcreative commented Jan 29, 2015

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

This comment has been minimized.

Copy link
Member

desandro commented Jan 29, 2015

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 comment has been minimized.

Copy link

hellojebus commented Feb 21, 2015

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

This comment has been minimized.

Copy link

hydrotik commented Feb 28, 2015

👍 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

This comment has been minimized.

Copy link
Member

desandro commented Feb 28, 2015

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

This comment has been minimized.

Copy link

hydrotik commented Mar 1, 2015

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

This comment has been minimized.

Copy link

hydrotik commented Mar 1, 2015

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 #20

@FabianGabor

This comment has been minimized.

Copy link

FabianGabor commented Mar 2, 2015

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

This comment has been minimized.

Copy link

wgstjf commented Mar 4, 2015

+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

This comment has been minimized.

Copy link

inlikealion commented Mar 5, 2015

+1

5 similar comments
@josephbergdoll

This comment has been minimized.

Copy link

josephbergdoll commented Mar 13, 2015

+1

@terkelg

This comment has been minimized.

Copy link

terkelg commented Mar 16, 2015

+1

@StefanEndress

This comment has been minimized.

Copy link

StefanEndress commented Mar 20, 2015

+1

@paul-straetmans

This comment has been minimized.

Copy link

paul-straetmans commented Mar 21, 2015

+1

@ghost

This comment has been minimized.

Copy link

ghost commented Mar 23, 2015

+1

@eikeco

This comment has been minimized.

Copy link

eikeco commented Jun 5, 2015

+1

@aaronstezycki

This comment has been minimized.

Copy link

aaronstezycki commented Jul 8, 2015

+1

@aaronstezycki

This comment has been minimized.

Copy link

aaronstezycki commented Jul 10, 2015

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

This comment has been minimized.

Copy link

eikeco commented Jul 12, 2015

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

This comment has been minimized.

Copy link

lmartins commented Jul 29, 2015

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

This comment has been minimized.

Copy link

dustinhorton commented Aug 20, 2015

+1

1 similar comment
@paulmasek

This comment has been minimized.

Copy link

paulmasek commented Aug 20, 2015

+1

@mdmoreau

This comment has been minimized.

Copy link

mdmoreau commented Oct 7, 2015

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

This comment has been minimized.

Copy link

eikeco commented Oct 8, 2015

@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 :)

@featherbelly

This comment has been minimized.

Copy link

featherbelly commented Dec 18, 2017

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

@leenasekhar

This comment has been minimized.

Copy link

leenasekhar commented Jan 16, 2018

@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

This comment has been minimized.

Copy link

dallanlee commented Jan 17, 2018

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

@leenasekhar

This comment has been minimized.

Copy link

leenasekhar commented Jan 17, 2018

@dallanlee Yes! You are right.

@dallanlee

This comment has been minimized.

Copy link

dallanlee commented Jan 18, 2018

@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

This comment has been minimized.

Copy link
Member

desandro commented Mar 12, 2018

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

@desandro desandro reopened this Mar 12, 2018

@gingersoulrecords

This comment has been minimized.

Copy link

gingersoulrecords commented Mar 12, 2018

@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

This comment has been minimized.

Copy link

eikeco commented Mar 12, 2018

@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.

@dallanlee

This comment has been minimized.

Copy link

dallanlee commented Mar 12, 2018

@desandro looking at the comments here from the past year, you'll already know my opinion on the matter, which hasn't really changed. If there were to be a JS option to change the carousel's interface type from moving/sliding to fading, I would still welcome it, but I'm not anxious for it.

All it would need to do, IMO, is have no CSS transform on .flickity-slider, set the CSS of .gallery-cell to not have a left value, make z-index: 1 and opacity: 0 while .gallery-cell.is-selected has z-index: 2 and opacity: 1. Which means .flickity-previous-next-button needs z-index: 3. Flickity could then have a starting default transition value on the opacity property that can easily be overwritten with the users own CSS.

But honestly, this hack isn't a problem for me. Calling it a hack gives it a negative connotation. I don't think there's a problem with it other than having to use !important in my CSS to override Flickity's inline styles.

Here's the basic demo you probably saw above where I implemented fading https://codepen.io/dallanlee/pen/GEjWpo.

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Mar 13, 2018

@dallanlee Thanks for your input here. I appreciate your enthusiasm! This would be a bigger feature because it directly confronts Flickity's positioning behavior. Here are some of the questions I'll need to answer (in addition to the points you raised):

  • What about groupCells?
  • What about cellAlign?
  • What about dragging? What about the scroll event? Does dragging incrementally change opacity moving from one slide to the next?
  • Should cells get display: none when they are completely hidden?
  • What happens when you remove a cell?

I've got ideas about how to address these. I think it can be done. But like I originally said, this is going to be a complex feature. If I'm going to do it, I'd like to do it right.


On top of that, the whole idea of Flickity is that it's flickable. It's is tactile, responsive to movement. Fade transitions with static positioning is antithesis to that. If you want a fade carousel, you don't need Flickity. You can build it mostly with CSS and some light JS.

This feature is just not my cup of tea. But there's been so much interest in it. So I'm mulling it over.

@dallanlee

This comment has been minimized.

Copy link

dallanlee commented Mar 13, 2018

@desandro Wow, very good points that I haven't given much thought to. I agree that Flickity isn't the right choice for a fade-only carousel. I've personally done it when the design calls for the same set of slides to be flicked on some screen sizes and faded on others. But I have been very narrow-sighted with the fade use cases based only on my specific needs. I'll take a back seat on this and see what others have to say before I provide more input 😳

@gingersoulrecords

This comment has been minimized.

Copy link

gingersoulrecords commented Mar 13, 2018

The reason I liked @dallanlee 's fork was because other carousel plugins (slick, etc) have a 'flash' issue where, during a transition, two slides having opacity values less than 1 causes a 'flash' of the background color. Using his fork, I'm able to achieve a far more elegant 'dissolve' effect, but I do have to override CSS and make sure that my transition speed is quicker than the animation delay.

Given the physics, grouping, and flickability intentions of Flickity, adding a fade option does feel forced. @desandro have you given any consideration to building a separate fading carousel plugin, if it's that simple? I'd use/buy it in a heartbeat.

@metafizzy metafizzy deleted a comment from jan-dh Mar 20, 2018

@gavin310

This comment has been minimized.

Copy link

gavin310 commented May 14, 2018

What about dragging? What about the scroll event? Does dragging incrementally change opacity moving from one slide to the next?

@desandro It would be pretty cool if dragging would incrementally change the opacity. Or at least having that as an option.

@cmalven

This comment has been minimized.

Copy link

cmalven commented Oct 24, 2018

Since it looks like you're looking for some feedback on this issue, here's my 2 cents…

I would love to have either an official "fade" transition in Flickity, or an easy, officially-supported way to accomplish a fade transition using the API. Some of the solutions posted here work okay, but I'm hesitant to use anything that isn't officially supported and documented by Flickity for fear of it breaking in future updates.

Every project I ever work on has at least one slider, sometimes several of them. I strongly prefer the flexibility, documentation, stability, and API of Flickity over any other option. However, much of the time a slide transition doesn't make sense for the design/animation language of the project. I still want all of the great things Flickity brings to the table, but I have to settle for an alternative just because Flickity includes no supported way to create the experience I'm looking for.

Even worse is when I have one slider experience on the site where Flickity absolutely is the best option, and another slider experience where it isn't. I'd have to be out of my mind to include two slider libraries, so usually that means I just don't use Flickity.

I understand the original thinking behind "Flickity is a slider library, it shouldn't include other types of transitions", but this doesn't mesh with my thinking about these types of experiences, which is that they are collections of rotating content and the type of transition is just an implementation detail.

If you want a fade carousel, you don't need Flickity. You can build it mostly with CSS and some light JS.

Here's a short list of things Flickity provides that are separate from "flicking":

  • Keyboard control
  • Slide control UI
  • Navigation for another flickity
  • Disabling slideshow functionality at certain sizes using watchCss
  • Grouping Cells
  • Setting browser hash based on slide
  • Automatically resizing based on content
  • imagesLoaded support
  • Fullscreen
  • Full API for adding slides, removing slides, changing slide, getting current slide, etc.

Maybe most of those features in isolation aren't too big, but in aggregate that's a lot of functionality to get for free even if I have no interest in a flicking experience.

@gingersoulrecords

This comment has been minimized.

Copy link

gingersoulrecords commented Oct 24, 2018

Nice. Flickity does carouseling better than Slick/Owl/etc, and fading/dissolving is a more elegant transition style than sliding. If a design demands elegance and subtlety, it'd be nice to have the option instead of hacking (I currently hack).

I'd be willing to sacrifice draggability and all the grouping stuff (aka force a single, full-width slide for fading) for a fading carousel that actually responds to quick 'next' clicks.

@mkstix6

This comment has been minimized.

Copy link

mkstix6 commented Nov 24, 2018

A scenario:
On sites where we have designed a large, relaxed-fade-transition, hero-area on one page. But also sliding carousels of items on other pages (especially common in our mobile designs).

Rather than serving two libraries to achieve the two carousel types.
It would be great, performance wise, and developer convenience wise, to serve the flickity library only and use for both carousel types (without unofficially hacking it to achieve fade-transition).

Other comments:

  • I haven't found a carousel that remotely beats flickity for all the reasons @cmalven listed. Plus the documentation is excellent. These things keep me coming back to flickity.
  • Love the idea about the swipe gesture actively transitioning/controlling the opacity change. I don't think I've seen something like that out in the wild.
@jnicol

This comment has been minimized.

Copy link

jnicol commented Dec 6, 2018

A +1 for this feature. Flickity is my preferred carousel, and fade transitions are the one feature I miss. About half the carousels I implement require fade transitions, and although the CSS hack described earlier in this thread does the trick, I would prefer for this to be officially supported by Flickity.

@kybradeck

This comment has been minimized.

Copy link

kybradeck commented Dec 14, 2018

I'm also using Flickity and I'm hoping to achieve somewhere between a swipe and a fade.

Imagine the fadeout solution as posted above, but the prev/next slides are offset by about 10% in either direction, so the direction of swipe is still visible—similar to current implementation, but more subtle than moving 100%.

@desandro maybe retaining movement (but not full movement) would ease some of your hesitation to this feature? :)

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Jan 17, 2019

🚨🚨 I've decided to build and maintain fade behavior for Flickity. 🚨🚨

Work on flickity-fade is currently under way. I hope to release the new package in the next couple weeks. Only took 4 years 😅

Thanks to everyone for displaying interest in this feature and for your patience waiting for its realization.

@o-l-e

This comment has been minimized.

Copy link

o-l-e commented Jan 17, 2019

I understand wanting to keep Flickity as a pure swipe carousel, but i think this is a useful feature in some cases. I tend to use carousels with swipe for touch formats, and fade for mouse/keyboard based formats. It is more subtle and easier on the eyes on large screens with fade, with less movement. So it would be useful if this feature could be changed with media queries or touch detection somehow.

I really like Flickity, and as a previous comment points out, it would be nice to not have to use two sliders. Besides there are so many decent fade sliders out there, but few swipe sliders as good as Flickity, so fade would be a nice secondary feature.

Keep up the good work @desandro!

@CHEWX

This comment has been minimized.

Copy link

CHEWX commented Jan 17, 2019

@o-l-e Look above your comment :)

@o-l-e

This comment has been minimized.

Copy link

o-l-e commented Jan 17, 2019

@CHEWX i know, i was just commenting since it was announced as a fetaure :)

@gavin310

This comment has been minimized.

Copy link

gavin310 commented Jan 17, 2019

@desandro This is awesome news! Thank you!

@intensr

This comment has been minimized.

Copy link

intensr commented Jan 18, 2019

finally nehehe

@desandro

This comment has been minimized.

Copy link
Member

desandro commented Jan 30, 2019

You can now fade with Flickity v2.2.0. Add the flickity-fade to enable fade option. See Flickity fade docs. flickity-fade is an add-on package, so it needs to be installed separately. Fade works with dragging, groupCells, wrapAround, imagesLoaded, and (hopefully) everything else in the Flickity feature-set.

I'm closing this issue as resolved. If you do run into a bug with fade, please open a new issue here or in the flickity-fade Issue tracker

lol Four years +1 day since OP. Thanks for hanging tight 🐻🌈

@desandro desandro closed this Jan 30, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment