5 ms·

Animating CSS Grid

140 points by skilled 8y ago

chrismorgan 8y ago
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 8y ago
  As far as I know, there are only ugly ways like this one: https://stackoverflow.com/questions/4679288/detect-if-property-is-animatable-by-css3-transition/11217022#11217022 https://stackoverflow.com/questions/4679288/detect-if-proper...
deleted 8y ago
[deleted]
matthewfelgate 8y ago
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.
anonu 8y ago
The <blink> of 2019....
- nullandvoid 8y ago
  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 8y ago
    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.
- Sakes 8y ago
  When done correctly and performantly, animations in web apps allow for a user experience that is closer to that of native apps.
pictur 8y ago
but why
- yurishimo 8y ago
  Realistically? Probably art for a while until people can find a suitable UI that needs grid animations. Or just nice transitions when changing responsive views.
- Sakes 8y ago
  If available in all major browsers, I'd use it for collapsable horizontal/vertical navigation panes/bars.
antibland 8y ago
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.
feluso 8y ago
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 8y ago
  The main reason I've been wanting this is to have panels that smoothly expand and collapse.
  - dclowd9901 8y ago
    You're building panels with a grid though?
    - setr 8y ago
      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 8y ago
        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!
hema_n 8y ago
A good one.
fareesh 8y ago
Any roadmap for Chrome?
deleted 8y ago
[deleted]
hardyo 8y ago
reserved
phkahler 8y ago
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 8y ago
  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 8y ago
    A well tested (js) library that does such animated filtering well is: https://isotope.metafizzy.co/ https://isotope.metafizzy.co/
  - phkahler 8y ago
    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.

140 points by skilled 8y ago

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 8y ago
As far as I know, there are only ugly ways like this one: https://stackoverflow.com/questions/4679288/detect-if-property-is-animatable-by-css3-transition/11217022#11217022 https://stackoverflow.com/questions/4679288/detect-if-proper...

deleted 8y ago

[deleted]

matthewfelgate 8y ago

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.

anonu 8y ago

The <blink> of 2019....

nullandvoid 8y ago
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 8y ago
  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.
Sakes 8y ago
When done correctly and performantly, animations in web apps allow for a user experience that is closer to that of native apps.

pictur 8y ago

but why

yurishimo 8y ago
Realistically? Probably art for a while until people can find a suitable UI that needs grid animations. Or just nice transitions when changing responsive views.
Sakes 8y ago
If available in all major browsers, I'd use it for collapsable horizontal/vertical navigation panes/bars.

antibland 8y ago

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.

feluso 8y ago

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 8y ago
The main reason I've been wanting this is to have panels that smoothly expand and collapse.
- dclowd9901 8y ago
  You're building panels with a grid though?
  - setr 8y ago
    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 8y ago
      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!

hema_n 8y ago

A good one.

fareesh 8y ago

Any roadmap for Chrome?

deleted 8y ago

[deleted]

hardyo 8y ago

reserved

phkahler 8y ago

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 8y ago
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 8y ago
  A well tested (js) library that does such animated filtering well is: https://isotope.metafizzy.co/ https://isotope.metafizzy.co/
- phkahler 8y ago
  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.