Animating CSS Grid(css-irl.info)
css-irl.info
Animating CSS Grid
https://css-irl.info/animating-css-grid/
25 comments
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?
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.
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.
A well tested (js) library that does such animated filtering well is:
https://isotope.metafizzy.co/
https://isotope.metafizzy.co/
Thanks for the informative response.
>> 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.
Isn't that what XSLT is good for to some extent? I guess nobody seems to use it but it can do things like treat selected items differently. Using animation features to hide rows in a grid feels like the wrong solution to me.
>> 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.
Isn't that what XSLT is good for to some extent? I guess nobody seems to use it but it can do things like treat selected items differently. Using animation features to hide rows in a grid feels like the wrong solution to me.
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
The main reason I've been wanting this is to have panels that smoothly expand and collapse.
You're building panels with a grid though?
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?
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?
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!
For anything where you only need to control one dimension, flexbox is way easier and cleaner. Plus you can animate it!
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?
As far as I know, there are only ugly ways like this one:
https://stackoverflow.com/questions/4679288/detect-if-proper...
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.
Any roadmap for Chrome?
[deleted]
[deleted]
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.
A good one.
The <blink> of 2019....
When done correctly and performantly, animations in web apps allow for a user experience that is closer to that of native apps.
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
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.