metafizzy / metafizzy/flickity

Lazyload + fade = some cells are missing the fade animation

Open
#1,242 1 comment 2 reactions 0 assignees View on GitHub
bug
Dominant language
JavaScript
Stars
7.6k
Forks
593
PR merge metrics
No merged PRs in 30d

Description

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

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the behavior in the linked CodePen with lazyLoad: 1 and fade: true, then inspect the code paths handling lazy loading and fade transitions. Compare the initial cycle with later cycles and with wrapAround enabled; done means every transition receives the fade effect for the reported cell counts and lazy-load values.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.