Animate from display none

A common problem people ask me about is animating from, or to display: none, since it's not an animatable property.
After making my recent video on the dialog element, I got a lot of questions about animating it in and out, and it just so happens to use `display: none` when it's closed, so I saw it as a good opportunity to take a look at it.
🔗 Links
✅ The video on the dialog element: kzbin.info/www/bejne/inKlkKlsrqeLf6c
✅ The CodePen: codepen.io/kevinpowell/pen/QWaBeGm
✅ Open Props: open-props.style/
✅ Video introducing Open Props: kzbin.info/www/bejne/qauzf4CBj8atsLM
⌚ Timestamps
00:00 - Introduction
01:32 - What we're starting with
01:59 - Adding the animation on open
02:52 - The problem with backdrop
03:53 - Getting the backdrop to fade in
04:31 - Why it's easy to animate on open but not on close
05:28 - A quick fix for animating the close
06:37 - the problems with this solution
08:37 - Making a "closing" state
09:15 - Making the closing state work
14:06 - The problem with different animations on close
15:01 - Closing when we click outside the modal
19:36 - fixing the backdrop shadow effect
#css
--
Come hang out with other dev's in my Discord Community
💬 discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 www.twitch.tv/kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-the-internet-awesome
💖 Support me on Patreon: www.patreon.com/kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: KevinJPowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@NoTengoIdeaGuey]

This video is well worth the watch for the tip about "{once:true}" event listener parameter. 🙏

[@gilneyn.mathias1134]

Right! I normally would just do a "removeEventListener" inside the event listener 😅

[@NoTengoIdeaGuey]

@@gilneyn.mathias1134 followed by 38 minutes of debugging why the fuck the stupid thing won't stop once I click it ITS SUPPOSED TO STOP NOW WHY

[@navidmafi]

Wow, that is what i've been looking for so long, to spice up my boring Modal boxes a bit XD

[@danielsenko4048]

i'm literally writing in a youtube comment section for the second time of my life, but i have to say it. I was looking for exactly this kind of problem and exactly you @Kevin Powell had an video about it. The nice thing about it is, that all your other videos are just equally helpful, so it's just amazing !!!

[@MrJettann]

Kevin, I just want to say thank you for all the information you giving to us and for discord community, there are so many friendly, pleasant and ready to help people! Today one of them helped me a lot with my problem👍😉

[@gohancomfejao]

I really really like your thorough explanation on how everything works. High quality content!!!

[@discoRyne]

Have run into this issue multiple times in the past and appreciate your insight here!

[@mrclaytron]

The box-shadow trick worked well! I would never have thought to do that. Nice one, Kevin!

[@TreyDubya]

THANK YOU. I have been working through Frontend Mentor projects, trying to add my own flair as I go, and this had been the feature no one has been able to help me with. Idk how you read my mind, but you did.

[@musicisasuperpower]

Literally was going to tackle this problem today, thanks for the timely video!

[@thalesem123]

Always when I have a problem at work, Kevin uploads a video solving it... U r the best

[@1Andypro]

Faking the dialog::backdrop with a box-shadow is brilliant. Wonderful tip!

[@protamim_32]

😂

[@EricRohlfs]

Excellent breakdown wish I had seen your video this morning, would have been a big help today.

[@tomcoop9750]

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.

[@jaygarricktheflash]

Holy Crap!! I've been searching for a solution to this for a bit. Thanks for the timely video. You Rock!

[@Baedda666]

I love it that you always bring the content that I didn't know that I needed it 😍

[@SilencedRPG]

This was perfect timing for my current project!

[@mrkhan7599]

I always get so confused about which video to watch first. You have a lot of knowledgeable videos. Thanks a lot.

[@keremunce1972]

Kevin, I have an issue "I can't do it opacity or visible it's gotta be displayed: none but same time it has to be with the transition. It has to be some way but I cant figured out." but then you came out and show us how precious you are. THANK YOU KEVIN. For making web more enjoyable and easy. Thank you mentoring us.

[@yehannk448]

I was waiting for this so for so long , Thanks

[@Paulina-sc1xd]

One of my favorite CSS teachers ✊, helpful video as always. Thanks a lot👍

[@cancer10in]

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

[@libbeytds]

If only I had known about the animationend event... I've always used some complex JS code snippet to pull the value of a CSS variable to calculate when a transition/animation was over. Thanks a ton!!

[@libbeytds]

Btw. there's also a transitionend event, in case you're working with a transition instead :)

[@mohamadybr]

yeah, I have spent a couple of days trying to code this functionality in JS and after I finished it I found out about the animationend and transitionend events

[@IceMetalPunk]

I've been a web developer for 19 years, professionally for 4 years, and this is the first time I've ever heard of the animationend event! Just goes to show we're all always learning, especially in tech fields 🙂

[@Xhicko]

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

[@gergopeto3554]

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

[@stefanofrontani2220]

What a beast. Thank you for these tips, really cool StuffIt.

[@Marcox385]

About 5 months later, I've already got a 7 in my web dev class, but I can't be mad at you Kevin. Great video dude, thanks for this.

[@dom8429]

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

[@joeldcanfield_spinhead]

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")

[@AirforcLuckyThirteen]

I never knew you could add additional properties like 'once' to event listener, very cool!

[@user-nc3lh2hb6h]

That's amazing, many thanks for your lessons

[@-0-__-0-]

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

[@SexyB3ast]

I literally thought this was impossible. Thanks!

[@bulent2435]

That was full of knowledge. Thanks.

[@monuchouhan8311]

Awesome video! had the same issue multiple times. Thanks for the solution.

[@manasupadhyay266]

Same problem i have been facing, and your just published this video😍

[@GaryBarclay]

I was almost certain you were going to do this pure CSS!

[@joyvideos1802]

It's helpful Thanks Kevin

[@tasmto]

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

[@tasmto]

**that

[@frankroos1167]

What makes it complicated is that the backdrop is not in the DOM when the open is off. I found out using the developer tools that there is no browser style sheet for it, even though my own styling does apply. (...to an element that isn't there.) If it was in the DOM when open is off, the opacity-transition would work. Although that would still leave it in the way of the regular content as well. Having made quite a few dialogs myself (the one from bootstrap kept acting up in the complex designs our designer came up with) I usually make the backdrop a container with the dialog itself inside. That makes it behave much like a single thing. Way easier to make it look nice, and play nice with the rest of the page. Opening and closing is as simple as adding and removing a css class. Or checking/unchecking a checkbox. I think I will keep doing that, considering the tricks needed to do it with dialog. The solution here seems needlessly complex, with animations and javascript timed classes. With the backdrop not removed, it can be done with transitions and no javascript at all. I have a codepen showing it. But I can't post that in a comment here.

[@hossamashraf4885]

this is quite useful, Thank you

[@ZipplyZane]

For some reason, I find I like the ending animation to be quicker. Even just seeing the modal drop away looks better to me than the same length animation as opening. It looks more energetic in taking you back to the main content. It particularly looks good when the modal actually has options and changes something about the underlying document. I'd suggest playing around with the speed of the closing animation is, and seeing if it feels better. Heck, maybe even make each animation speed into a variable.

[@danielapro9755]

I thought I was the only person dealing with this issue... thank you so much 😭😭😭😭

[@mtranchi]

dang it!! Was just dealing with this issue a few days ago.(transitioning views though). You're a day late and a dollar short Kevin!! :) And i'm busy regrowing the hair i ripped out of my head. Thanks hoss, love your vids.

[@permanar_]

For fading out, I usually create something like 'active' class but for modal with opacity: 1; & display: block; but with each separate class (and default modal styles is opacity: 0; & display: none;) and later, ill just remove the 'modal--active-opacity' first, then use setTimeout for removing the the 'modal--active-display'. You could use the same duration as how long your transition-duratiom goes for the timeout. And the same goes for activating the modal but reverse the action with much lower duration timeout (let's say 50ms).

[@rimzzlabs]

same been using this approach since i was starting to learn DOM

[@mohammedabdolrahman8377]

I think you're the best web developer ever existed 👏👏👌👍💪

[@omadbekjaloldinov4608]

You are CSS KING!!!

[@microforms]

Amazing

[@hmm5630]

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?

[@germanmartirosyan6230]

Great!

[@A_Lesser_Man]

well, snap! i had no idea you could do all that (i knew about modals, but not all that fancy stuff wow)! very nice.

[@darkflar3]

You make me fall in love with css❤

[@RodrigoNishino]

So nice

[@shandysven3494]

finaly found!! thx

[@Technoph1le]

Also, in details tag in HTML, there is an 'open' attribute, which can be used to animate as well.))

[@gustavocosta9574]

Great video, I would love to see a video explaining how to do those "drawers" that people usually use in FAQ sections

[@Technoph1le]

you mean detail tag in HTML?

[@gestaltlabart]

It would make me much less frustrated of css if you have a solution for animating height between auto and 0 without an arbitrary max-height, that causes an pause at the beginning/end of the animation.

[@mattwindle3998]

One of the most annoying things about modern-day CSS and front-end web development.

[@gestaltlabart]

@Grayson Peddie only works for static content, and not in responsive ... i have cms where the customers put whatever they want - so that's not a working solution for me

[@roye7304]

You don’t want to animate height. It’s bad for performance. It depends on your use case but maybe transform: scaleY() can fit your needs

[@arden6725]

@@roye7304 it’s fine to animate height as long as it’s done properly

[@dannyt503]

It's a pain. I get around the issue by: 1. Add an inner wrapper element 2. Detect height of inner wrapper 3. Apply height of inner wrapper as max height of outer wrapper 4. Animate max-height (and visibility for accessibility) when opening & closing. The browser doesn't always detect the correct height though, adding a time out delay to the max-height calculation often helps but it typically doesn't completly eliminate the issue. Also, if the screen size changes you need to update the max-height setting to accommodate the new content height.

[@KwamsC]

Just gave up on that problem, thank you!

[@greysilver00]

ur channel is great

[@prezgolez]

I’ve found the visibility: collapse or hidden (don’t remember which one lol) rule to be really useful here as a replacement for display: none, as the element still exits but is not visible and can be animated from

[@AndreasElf]

From intellisense... visibility: collapse; "Table-specific. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'."

[@oussamasethoum1665]

Thank you

[@wolframzell6162]

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

[@PeriklesPeriklesoglu]

thank you

[@arieljuod]

I think `vmax` is safer in the firefox workaround, for tall narrow devices with little content in the dialog, the backdrop will use the width for the backdrop but it may not be enough to cover the screen, with vmax it will use the largest of both sides so it will always cover the screen no matter the size

[@noureddine2228]

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

[@pulserudeus7968]

🔥 content

[@schworak]

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

[@virinchimsk83]

U r just amazing 🙏

[@KevinPowell]

Thank you 🙌

[@dannyt503]

6:38 - At this point in the video, add "visibility: hidden" to "visibility: visible" in the fade-in animation, and "visibility: visible" to "visibility: hidden" in the fade-out animation. That will fix the accessibility issues and still achieve the desired affect with *no JavaScript*! Ok yeah, it's not animating "display: none" but you don't have to.

[@samuelokoli6584]

but the element stays..in the DOM with this approach and still takes up it's width In the DOM

[@dannyt503]

@@samuelokoli6584 yes but if you are doing a dialogue sort of thing, it is already taken out of the document flow due to the fixed positioning. So having it still take up space isn't actually a problem. You will need to add pointer-events: none; to the closed view to prevent people clicking on it though. 99% of the time, this is enough.

[@legostud]

FYI, visibility: hidden will hide an element from screen readers and it’s animatable so you don’t need to use display none.

[@zaka7075]

@@Zakum that's also true

[@legostud]

@@Zakum - I have not found that to be true. Maybe it depends on what you’re placing the visibility hidden on. I’ve usually put it on custom modals wrapped in a div or section element.

[@dannyt503]

@@Zakum if it is set to "visibility: hidden;" it will not be interactive. It will technically take up space on the page which is what you are probably thinking of. A dialog is not in the regular document flow though so that's a mute point. Visibility is the best way to achieve this effect.

[@Zakum]

You guys are right. I mixed it up with opacity since visibility hidden still takes space as Daniel said.

[@minamulhaq]

But it keep the element maintains it's size.

[@MR2U2B]

Great stuff, as usual. How do you stay up to date on CSS?

[@fluente]

This video helps me a lot! I now have a lot of refactoring to do hahaha. About the backdrop with box-shadow though - 100vw won’t work on mobile, will it? Because 100vw won’t cover the height of the viewport.

[@dierkkoenig]

very nice, thanks! BTW: display: none does _not_ remove the element from the dom. No css does ever change the dom. It only appears as if.

[@eaglethebot1354]

I use aos scroll animations but was wondering if there's a way to make the elements stay loaded on the page after they have their little scroll-based animation play out. Currently, once the element is off screen its unloaded, and when I scroll from bottom to top of the page it'll replay those animations again which doesn't look good as I've laid them out for looking nice on scroll down. Any help is appreciated, thanks

[@SebastianZartner]

If I am not mistaken, transitions on the backdrop don't work because the backdrop is part of the dialog element which initially has display: none; on it. And that display: none; causes the dialog element not to create a box. So the ::backdrop pseudo-element also doesn't create a box. And if an element doesn't create a box, no transitions apply.

[@dbweb.creative]

I wonder if there is a simpler way to do this by triggering a reflow / animation name change. Also maybe something like splitting animation into 0% to 99.99% and then 100% for the actual state change or something. btw maybe take a look at light brush? it's a very nice web painting application made in javascript, I think you'd enjoy pondering it.

[@Technoph1le]

Hi, Kevin. Can we also use the method once you had shown in the 'space tourism navigation bar' KZbin video? Like if the browser supports, it will run a particular code, otherwise another one

[@clevermissfox]

Even though it’s in the name, I didn’t realize keyboards could still interact with a pointer-events: none; oops. Very very good to know

[@AndreasLepsuch]

Pretty good ! Thanks. - Animation with JQuery is a bit easier. Just add some code before the show and after the close - command - and you are done.. Then you do not need the solution with css and js.

[@danielpalm9091]

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

[@camar078]

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.

[@ZipplyZane]

Huh. I had thought there was a move towards treating opacity:0 as if it were visiblity:hidden. I'd say the bigger problem with animating display:none is how you would handle objects that are actually within the main page layout, where other elements will move around to accommodate. I suspect you'd have to animate height and width.

[@rope321]

Was this inspired by Adam Argyle Dialog GUI challenges video, uploaded yesterday? Cause it seems really similar.

[@sjn_]

I think, animating opacity would be much more convenient and performant. If setting the opacity to 0 to hide the modal prevents users from clicking anywhere, pointer-events: none; does the job then setting it to all when the modal is open.

[@sjn_]

@Grayson Peddie Well, I don't think placing the markup for the modal dialog then just showing/hiding like the video shows or what Bootstrap does is a good idea for this exact reason. I prefer making a small Dialog object that works the same way as Sweetalert. So it's just one markup for everything, the modal title, body contents and click events are dynamically changed with JS. Much better. I know what I'm saying has nothing to do with what the video shows though, not trying to foreshadow it but I just think this is a better approach specially because opacity is cheap to animate.

[@vontower]

For your next live build, you should make your video opener in CSS

[@StripedLime]

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

[@hiryuimajin]

How do you come up with these things that we need? Thanks Kevin

[@kevincrinklaw7422]

Hey Kevin: question (or suggestion??): would 100vmax on the 2nd box shadow (eg @21:08) be preferable? I haven't played with it (clever, btw!) but, would there be issues with 100vw in situations where height > width? (eg, portrait mode mobiles, maybe rotated monitors)?

[@jpisello]

You're correct (I was going to write the same thing).

[@undsgner7757]

Instead of using display:none and display:block you can use visibility:collapse and visibility:visible and this lets you animate with just transitions and there is no need for animations

[@legostud]

Instead of adding a “close” attribute, you could add a “loaded” attribute on page load, then apply the animation effect to that attribute. This only needs to run once so you don’t need to listen for animation end.

[@carodecastellogame]

Hi Kevin where's the flex box gallery with horizontal scroll video? thanks

[@AndreasLepsuch]

Is there any chance to get to the backdrop-element via Javascript ? - For example to make it programatically blur. Seems that nobody knows an approach.

[@r_a__u____l]

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)

[@dvdrtrgn]

This boils down to 20 minutes of “just brute force it” using CSS and JavaScript and markup, as you did in the old days.

[@morning5tarr]

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

[@1nm1m]

Hey man, Good trick, but it would be pretty easyer if you will use "visibility" property next time

[@radenmulyadi2589]

somebody need to hire Kevin to make xss payload

[@bzchii7474]

God bless framer motion

[@djalexxxgr]

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

[@JulianColeman03]

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