Beautifully animated toasts stacks

A Web Developer based in Belgium, specialized in PHP & JS development
Search for a command to run...

A Web Developer based in Belgium, specialized in PHP & JS development
No comments yet. Be the first to comment.
I recently needed to collect all changes in one file for reporting purposes. Found this article: https://ratfactor.com/cards/git-diff-with-new-files In case you need something similar on Windows, here

Some projects start with a grand plan. Others start because you just need to read a file without thinking too much about it. That was the case for spread-compat. I needed a common interface for CSV, X

With modern css, you can almost get rid of sass. But there is one last pain point : media queries. Not being able to use variables or an easy, common syntax for typical breakpoints is really annoying. That is, until you meet Media Queries Level 5. I’...

This is a quick article to share this demo I just made. https://codepen.io/lekoalabe/pen/JoPNWpX

Modals are typical UI elements for many web apps. There are countless packages dedicated to that specific features, each framework creating its own variation. Popular frameworks like Bootstrap also have custom code to deal with it. But all this feels...

I've already talked about my "toaster" library in a previous article. Today, I've released a rather nice update that makes the Bootstrap toasts stack much nicer.
As strange as it may sound, Bootstrap toast stacks are not well-designed for animated toasts (in my opinion, anyway...). This means that it looks great for static toasts, but as soon as you try to add or remove toasts in them, they move in a very "jumpy" way due to the display: none being applied at the end of the animation.
This can be seen in the codepen below
The solution is simply to animate the margin (top or bottom, depending of the position of the order of your stack) by the height of the toast. This require disabling the display:none being applied by default and in my case, it's not an issue, since I'm working with dynamic toasts that get removed from the dom anyway (after some delay...).
These changes have already been integrated in my bs-companion library and can be seen lives here.