Learn how to animate elements from display: none in this 22-minute tutorial video. Explore common challenges and solutions for animating elements that use display: none, with a focus on the dialog element. Discover techniques for adding animations on open and close, handling backdrop animations, creating a "closing" state, and addressing issues with different animations. Gain insights into closing modals when clicking outside and fixing backdrop shadow effects. Follow along with provided CodePen examples and leverage Open Props for enhanced styling. Perfect for web developers looking to improve their CSS animation skills and create smoother user interfaces.
Overview
Syllabus
- Introduction
- What we're starting with
- Adding the animation on open
- The problem with backdrop
- Getting the backdrop to fade in
- Why it's easy to animate on open but not on close
- A quick fix for animating the close
- the problems with this solution
- Making a "closing" state
- Making the closing state work
- The problem with different animations on close
- Closing when we click outside the modal
- fixing the backdrop shadow effect
Taught by
Kevin Powell
