This CSS Trick Makes Impossible Animations Possible

🌎 Find Me Here:

#Shorts

[GH-puxc]

😭 this would have saved me 6 hours if only you’d released it 2 days ago 😂😫

[blackpurple]

Found this trick from Kevin a few days ago, this is a great way to animate simple pop-ups and bigger nav blocks alike

[riwahoussari]

U can use transform: scaleY(0); to transform: scale(1). And you might need to set the transform-origin to top

[backup_hdd]

now that's a solution i certainly was not expecting

[hanesmitter]

Something to note is that animating layout changes is expensive to browser perfomance because browser has to calculate layout and repaint

[alokkothiyal]

Much struggle with this issue a lot....i used to transition using max-height...🍻🙌🏻🙌🏻

[leebobtheblob]

Css animation
- issue: unable to animate from height: 0-> height: auto
- solution: need a explicit height
— additional wrapper with row-template-rows: 0
— open row-template-rows: 1fr

use 1fr and overflow hidden

[whoeverseesthatbehappy]

No one mentioned that it's usually a bad thing to animate layout prone properties. They cause layout shift and intensive calculations. What you want to do instead is animate using transform and opacity, as they happen after the layout calculations

[perfect.stealth]

Clever. Ive been using max height for it because it can be animated

[ahmedn.]

man this is amazing.... thought it'd be impossible to do animate unknown heights without scss and js involved. props 👏

[daxtron]

Working on a feature like this soon. Thanks

[stefanoesu]

it is like 13 years that i wanted to know something like that! thank you!

[penry]

That's neat you can do it in pure CSS now.

[aminehl]

use this idea for another video. you can go without wrapping, and also without having overflow hidden (you might want to add a scroll) since 'transform' can be animated,

.default_class {
// ur other style;
transform: scaleY(0);
transform-origin: top;
transition: .2s all ease-in-out;
}
.default_style.open {
transform: scaleY(1);
}

Though you might also wanna wrap it because transform usually break z-index, but you can control that with a parent div wrap

[nielskersic]

We’re getting height: auto animations soon though! CSS working group is on a roll

[anasali-ytlg]

we can use transform: scale and transform-origin: top

[royhyde]

Man I have been looking for a way to animate height without setting it for a while.. thanks alooot Kyle.. this is incredible...

[rehan_requiem]

Just toggle from max-height: 0 to a large max-height. Works in most cases.

[hamzahokkamahendra]

This is why i subscribe him, always new thing to learn

[EivindFigenschauSkjellum]

Thanks.

I think this can be done be combining height: auto and max-height as well though?

Haven't tried it in a while, but I think that will work and be less trouble.