Inner content gets instantly changed

[mrg0lden]

Hey, this is an edited version of the original demo. It doesn't behave as I'd expect it to.

https://codepen.io/MrG0lden/pen/mdVxvRp

I want the inner content to get transitioned smoothly as well.

[Nantris]

My first impression was that this was implementation specific and outside the scope of the project, but the readme does say:

If a grid item has children, they should be surrounded by a single container element. This is so we can apply a counter scale and prevent children elements from getting warped during scale transitions of the parent.

So my impression now is that this is a legitimate and unexpected issue. Interested in why it occurs.

[christiannaths]

I'm having the same issue, however I think this is actually expected— it's the counter-scale at work. When the animation starts, the DOM elements have already changed dimensions (nothing can be done about that, since the CSS has already been updated via the triggering class change), the scale on the parent is the thing doing the animation from the previous size of the DOM node to the current size of the DOM node. The counter-scale is just taking the current size of the child DOM node and making sure it doesn't get warped/distorted by the parent's scaling, by scaling it back to the current size of the DOM node.

Unfortunate, but expected.

Here's a screenshot of the DOM mid-transition. You can see that the scaleX on the parent is 0.579... and the scaleX on the child (the counter-scale) is 1.725... — these are all based on the current size of the DOM node, aka the "new" size that they're being scaled to.

My first thought is that maybe if this lib were to resize the parent node (rather than scale), it might solve this, and even remove the need for a counter-scale all together. However, I have no idea if the author has tried that already and it's just a bad idea for other reasons.