I have a webpage displaying a 12 month calendar for users to select various dates. The calendar always displays 12 months. Using a slider I allow the user to dynamically change the size of the months to their preference. I have the month grids in a flex container, which wraps the months based on their screen size and preferred calendar size. For instance, the calendar may be 4 months across taking up 3 rows. If they increase the display size of the month flex-wrap may adjust the layout to 3 months across taking up 4 rows.
I'm using TailwindCSS, and using the transition-[width] style the months smoothly grow and shrink as the user sets there preferred size (the month component layout is dynamically computed based on the width).
However, as the size changes, the flex-wrap positioning instantly snaps the month components between rows (i.e. 4 months across instantly snaps to 3 months across, and viceversa). I would like to smoothly transition the position of the elements as flex-wrap adjusts the number of elements in each row.
Is this possible? I have looked for a while now and cannot find any way to animate/transition flex positioning. Ideally this would be done using CSS/TailwindCSS or known supported animation libraries rather than custom javascript.
