
Animating CSS Grid - skilled
https://css-irl.info/animating-css-grid/
======
phkahler
Why is this just now possible? Either CSS properties can be varied in this way
or they can't right? Or is this a previously unimplemented part of the spec?
And if so, why is animation (varying of properties) not a more general concept
in CSS?

~~~
memco
CSS animation is a fairly general concept but it is limited in some cases such
as this by the fact that the renderer and spec have certain constraints that
don’t play nice for the animation system. More specifically an animation might
increment an integer by .01 until reaching the next one but the spec does not
allow for fractional valise for that property so even though the value is
changing the appearance is not. When the increment reaches a valid value the
property will simply jump to the new value without showing any intermediate
state. Grid I think is a particularly tricky spot for some of these properties
because of such behavior.

To address some of the comments about use cases: we have a grid of items we
want to filter based on a user’s search query. It is easy to animate the items
disappearing but not easy to shift the remaining items into their new
positions because the grid properties don’t let you animate that way. If I
have an item in row 2 column 3 there’s not an easy way to transition it to row
1 column 1 at present. If you change the row and column values in this way it
will jump from column to column row to row, not move from 125px,80px to
0px,0px along a sloped path.

~~~
jonahx
A well tested (js) library that does such animated filtering well is:

[https://isotope.metafizzy.co/](https://isotope.metafizzy.co/)

------
feluso
this is neat, I've been using css grid a lot lately and I feel like it solved
a big part of my annoyances with CSS, and yeah sure I don't see a use case for
this thing in particular but it looks fun, and I'm sure someone else will

~~~
disease
The main reason I've been wanting this is to have panels that smoothly expand
and collapse.

~~~
dclowd9901
You're building panels with a grid though?

~~~
setr
My WebDev knowledge is quite poor but it seems natural to me that if you have
slack-like sidebars, where they tend to be optional but non-temporary, the
ideal solution would be 2 css-grids, and a way to switch between them. Even if
it were temporary, like a shop using a sidebar for its menu , it still seems
intuitively the preferred solution. Essentially just flipping between grid-
states.

This is assuming you're actually dealing with a grid, and not some kind of
floating pop-over panel eg a drop-down menu panel

How would you go about it? Maybe more importantly, how would you _want_ to go
about it?

~~~
lexicality
Honestly, for sidebars I'd use flexbox.

For anything where you only need to control one dimension, flexbox is way
easier and cleaner. Plus you can animate it!

------
chrismorgan
Is it possible to efficiently detect whether grid-template-columns and grid-
template-rows are animatable in JavaScript, so that you can let the browser do
it if they are, and manually tween if they’re not?

~~~
spiderfarmer
As far as I know, there are only ugly ways like this one:
[https://stackoverflow.com/questions/4679288/detect-if-
proper...](https://stackoverflow.com/questions/4679288/detect-if-property-is-
animatable-by-css3-transition/11217022#11217022)

------
antibland
Anything that can expand the creativity of people building web experiences is
a good thing. Just looking at those demo vids gave me a bunch of UI ideas that
stimulate my front-end dev brain.

------
fareesh
Any roadmap for Chrome?

------
matthewfelgate
I'm not sure if this is going to be a good idea long term. Do we want to
element structural parts of a webpage.

------
pictur
but why

~~~
Sakes
If available in all major browsers, I'd use it for collapsable
horizontal/vertical navigation panes/bars.

------
hema_n
A good one.

------
anonu
The <blink> of 2019....

~~~
nullandvoid
Not sure if you mean this as a joke but css-grid is a pretty major
productivity boost and won't be going anywhere any time soon I wouldn't think.
The ability to animate will be a massively used feature I'm sure once more
browsers support it

~~~
anonu
I meant it partly as a joke, but the downvotes clearly indicate its not a
lauging matter. css-grid is good, of course, but animating it has little
application IMHO beyond nicer looking responsive design. I've been wrong in
the past though - so I might wrong again.

