search

metafizzy / flickity

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

Make active cell different width width css transitions #811

Closed ivande closed 5 years ago

ivande commented 6 years ago

Hi, I'm trying to create a slider where the selected slide grows smoothly after selecting it, however due to using CSS transitions to accomplish this, theres a moment when triggering 'reposition' on 'settle.flickity' where the slides position itself twice.

After checking the code I think the issue is due to the translateX() value on .flickity-slider being calculated before the width change.

You can see this when going from slide 2 to 3 and afterwards on the test case. Is there a way to fix what's causing this?

Thanks in advance,

Test case: https://codepen.io/anon/pen/vawbWZ

desandro commented 6 years ago

If you're looking to animate position of the other cells, you'll need a way for Flickity to calculate the proper size of the cells after the size of one has finished changing. Unfortunately, Flickity does not have this behavior or features built-in. I'll leave that up to you.

jessehigson commented 5 years ago

@ivande did you make any progress with this? Trying to solve this for a similar scenario.