Animating height: auto — nemzes.net
Ever tried to animate or transition the height of an element that has dynamic dimensions? It's frustrating and unsatisfactory. Here are two strategies to make it better.
Animating height: auto — nemzes.net Animating height: auto Posted Oct 31, 2021 ; updated Dec 15, 2021 (If you want to skip the background, go straight to the fun part of this post .) Can you make it expand and collapse? This is one of the most common requests in a complex user interface: make an HTML element expand and collapse on toggle. This is a great way to hide complexity and features that aren't frequently in use. In CSS, we can simply set display: none on the collapsed state and be done with it. In the following example we set the toggle state based on whether the checkbox is checked or
related reading
- Using CSS Transitions on Auto Dimensions | CSS-Trickscss-tricks.com
- Anime.js | JavaScript Animation Engineanimejs.com
- Details That Make Interfaces Feel Betterjakub.kr
- Transitions.dev — Essential transitions for web appstransitions.dev
- Don't animate height! | Granolagranola.ai
- Motion (prev Framer Motion): JavaScript & React animation librarymotion.dev
- Transitionsanimations.dev
- Inside Framer's Magic Motionnan.fyi
- An Interactive Guide to CSS Transitions • Josh W. Comeaujoshwcomeau.com
- Avoid 100vh On Mobile Web | chanind.github.iochanind.github.io
- On UI Animations - Shu Dingshud.in
- Goethe’s Advice for Young Writers by Johann Peter Eckermanntheparisreview.org