metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.53k stars 603 forks source link

Lazyload + fade = some cells are missing the fade animation #1242

Open scrollable-sidebar opened 2 years ago

scrollable-sidebar commented 2 years ago

Test case: https://codepen.io/scrollablesidebar/pen/zYWavyL

In the test case there are four images, and the following options are set: lazyLoad: 1, fade: true,

The transitions are WITHOUT fade effect for the transitions between cells: 1-2-3

The transitions are WITH fade effect for the transitions between cells: 3-4

Notes:

Once all cells have been cycled through, on subsequent cycles the fade effect is there for all cells.

If you add more cells, all cells will be WITH fade effect, apart from the last one which will always be WITHOUT fade effect.

If in addition to the above, you also increase the lazyload option number from 1 to n, the number of cells that are WITHOUT fade effect will increase by the same number (and will always be the final n cells) .

Additionally, if you set the lazyload option to 1, and add the option wrapAround: true, it behaves a bit differently, like this:

3 cells - transition from 1-2-3 WITH fade effect 4 cells - transition from 1-2 WITHOUT fade effect, 2-3-4 WITH fade effect 5 cells - transition from 1-2-3 WITHOUT fade effect, 3-4-5 WITH fade effect 6 cells - transition from 1-2-3-4 WITHOUT fade effect, 4-5-6 WITH fade effect

desandro commented 1 year ago

Thanks for reporting this bug and providing a test case. This is indeed a bug.