Transitions work by easing from one initial value to an other defined one. The problem with vertical sliding is that most HTML element containers do not have a predefined height, but rather auto adapt this value to fit the content. Therefor, it is quite tricky to animate the entrance of randomly sized blocks without jumping stroboscopically into the margin, padding and box-sizing soup.

My approach is to use the CSSTransition component callbacks to animate a negative margin and slide our items from the top. This offset is equal to the calculated height difference of the container between before and after appearance.

If you listen carefuly, you will notice that “space” and “enter” keys even have their specific sounds ! The audio samples were created by my homonymous friend Etienne. Together we have some more JavaScript sound design exercises in mind so stay tuned.

I delivered an Angular JavaScript front-end for an Access-Control System with Facial-Recognition, refactored the API and entire Python back-end over the IoT device, built the Desktop setup application and even contributed to the Hardware development !