Problem with toast animation (how to make old one slide back?)

I created this codepen https://codepen.io/Lko3001/pen/mdgmKaW, as you can see, when you create a few toasts, and then create a new one, the new one appears out of nowhere and most importantly, the other cards jump up and then down, instead, I want the current cards to slide back, and then add a new card, how do I do that?
No description
1 Reply
Chris Bolson
Chris Bolson8mo ago
I would move a lot more of the logic into the JavaScript. This would make it easier to calculate the top offset and scaling with no need to manually set it for each child. I have forked your pen to show you how I might do it. I have used grid to stack all the "toasts" on top of each other and then scaled them down and moved them up with JavaScript as a new one is added. I have also set it to slide the new toast in from the bottom. For the hover event I have also reverted to JavaScript to calculate the positions, both on mouseenter and mouseleave. The code needs optimizing (I might make some changes later) but it does work as I think you want it: https://codepen.io/cbolson/pen/YzMVdrd
Want results from more Discord servers?
Add your server