corenominal

Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: transitions

Using CSS Transitions on Auto Dimensions image/svg+xml

We’ve all been there. You’ve got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You’ve set transition: height 0.2s ease-out. You’ve created a collapsed CSS class that applies height: 0. You try it out, and… the height doesn’t transition. It snaps between the two sizes as if transition had never been set.

This helpful post came too late for me, I was there yesterday and I wasted a good few minutes trying to get my head around this frustrating feature. Just think, I could have used that wasted time to do something proper useful, like making another cup of coffee.

Barba.js image/svg+xml

barba.js is a small (4.4kb minified and gzipped), flexible and dependency free library that helps you creating fluid and smooth transitions between your website’s pages.

It helps reducing the delay between your pages, minimizing browser HTTP requests and enhancing your user’s web experience.

I kind of like the idea of these push state transitions, but I don’t come across many websites that use them, apart from the occasional arty portfolio site.