Animate from display none

What modal[open] mean?

God bless framer motion

Well,shoot. I was hoping there was an CSS-only solution for this. Hmmm.

Backdrop animation still broken in Firefox a year later. What a disaster.

thank you

WAIT! I can make this even MORE ridiculously complicated for no apparent reason! Second thought....hmm....

Thank you

You make me fall in love with css❤

I keep trying to get away from jQuery and/or jQueryUI completely; however, this video is a fantastic 22-minute sales pitch for jQueryUI, which has jQuery's toggleClass method that takes animation parameters--and it works fine with display:none. Without jQueryUI, this video shows the extremely long cascade of a problem with a solution, with a problem with a solution, with a problem...

Instead of javascript and "closing" attribute, a position: fixed; with top: -10000; left: -10000; would work as well, I guess?!? (I have to test it)

rather not use the :: backdrop if it is not working lol

Kevin, your videos are amazing and help me a lot!

In this moment we all are hating the CSS design team who made the display property unanimable.

Do the animations still play when you hit either the Esc or Enter keys?

All in all it's a pain in the a... I solved the problem with a setTimeout function which sets the display attribute to none after my fadeout animation finished which needs less workarounds for it to work.

Just seems ridiculous how some of the most obvious requirements of CSS require so much hack-around.

OH MAN! How didn't I know that {once:true} trick before now??? HOW??? Thanks!

somebody need to hire Kevin to make xss payload

Does pressing [Esc] in the modal still close and animate?

after a couple years of health challenges making my brain too foggy for words, I'm binging all the KP vids I've missed. I also, this month, for the first time ever, heard your gretting correctly. (After finding zero references to "Canadian slang friend and friends")

Great video as always. I don’t understand when the display:none gets removed

I would just do
if (!modal.hasAttribute('closing')) return
and install that EventListener on load, without `once` to avoid listener registration churn.

I don't think setting the shadow spread to 100vw is a good idea as it won't work as intended on screens that has portrait orientation because in that case the width is always smaller than the height thus on mobile devices the shadow won't be enough to reach to the top and bottom edge of the screen since it's limited to the devices viewport width which is smaller than the height as mentioned at the beginning, great video though.

I'm having trouble with this in react. The div animates but the children won't close.

Any hack to make css collapse/expand animation on height or width?

Dialog doesn’t seem to be supported on iOS despite specification saying it does

I've been searching for this solution for almost 24hours, Never knew display properties were not animatable...Thanks Kevin :)

FYI, instead of using the 'animationend', if you use Promise.all(modal.getAnimations().map(a => a.finished).then(() => { /* dialog close code */ }) then it will only run the dialog close code once all of the animations have finished.

you know a CSS effect is bonkers when Kevin Powell is forced to use javascript

i think we can overcome the issue with customising the two animations by using event.animationName to know when to remove the attr & close the modal. we'll also have to remove the once and manage that ourselves

Thank you for keeping my request and creating this video ❤️❤️❤️

youre videos are spot on man! keep up the great work!
wanted to let you know that you inspired me like half a year ago to get back to coding again, i never studied web development before, but after seeing a couple of your videos i was instantly hooked.

with your help i got good with css and html, but i didnt stop there, i learned A LOT more, js for dom manipulation, and after that came serverside nodejs and now i host my own web application thats actually useful to a company.

and now this video, i was just thinking about how can i animate display:flex to display:grid, to make the change smoother. did google implement mindreading algorithm or what?

Wow this is what I was looking for damn, thank you!

It's helpful Thanks Kevin

This is awesome! Another option would be to create an open and close class with opacity transitions. Then add or remove the classes with JS and use a setTimeout to “display:none” after the object finishes fading.

One caveat with the box-shadow workaround is that you probably need max(100vw, 100vh) instead, because if the height is bigger than width then the shadow won't cover the whole screen ;)

Great!

There's another solution:
pointer-events none. kinda hacky tho.

I just do setTimeout display none, after opacity 0; I mean if you are already using js then why not.

What JS book would you suggest to go along with CSS? (And forms)

There is also an event "transitionend", so you can do the same thing with transitions.

Or just use the visibility property

Wow!
Thats once: true was especially eye poppingly gorgeous and elegant!

The backdrop is still there in the FF solution, right, meaning you can still click it to close the dialog?

hmmm I thought you were struggling with this because you were using css only... but after I saw you using JS, I was like why would you hassle yourself with all this...


Do a check on js for opacity of the element, if (opacity == 0 ) set the element's display to none.

Or is there a problem with that logic? (I haven't tested anything, just at the top of my mind )

I used the same solution for animating the <details> / <summary> from display none. giving it a temporary closing state is a great solution :)