Smoothly animate reposition() and prepend/append/insert/removing gallery elements

[MintyOrb]

Flickity is fantastic!

I'm working towards building a dynamic UI that leverages the library (as well as packery).

Is there currently a way to avoid gallery element overlapping while adding/removing and smoothly animating width changes of gallery elements?

The goal is to add cell allocation that reflects the gallery elements width (even while in transition).

[desandro]

Thank you for this feature request. +1 this issue if you would like to see this feature added to Flickity.

[oskarrough]

+1. One use case would be a gallery where the .is-selected cell has twice the size of the other cells. I've attempted a pattern as this:

.gallery-cell {
  width: 33%;
  transition: width 400ms;
}
.gallery-cell.is-selected {
  width: 66%;
}

let gallery = new Flickity('.gallery');
gallery.on('cellSelect', () => {
  gallery.selectedElement.addEventListener('transitionend', () => {
    gallery.reposition();
  }, false);
});

… but it of course doesn't animate smoothly. Any ideas how to approach it?

[desandro]

Looks like this did not get much public interest. Closing. Thank you for this feature request! :strawberry:

[jessehigson]

@desandro any chance of this getting this re-reviewed for upcoming versions of Flickity?

[desandro]

@JesseHigson Sorry nope.

[maycontainweasel]

I would also really appreciate this feature, could you give us an idea of how you would accomplish this if we wanted to animate the repositioning? thanks for the amazing work!

[desandro]

Look into Flickity.prototype._positionCells in flickity.js

[t-walker-wei]

+1 I would like to see this feature added to Flickity