metafizzy / metafizzy/flickity
Lazyload + fade = some cells are missing the fade animation
- 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
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