this week's project: growth path toasts

so, i'm sure you all have nightmares about toasts piling up in the corner and no matter how many of them you clicked away there would always be more and sometimes they would just get stuck and it was all in all a very traumatic experience with much screaming.

but admit it, you miss them just a little.

they provided positive feedback about your progress on the site that is terribly lacking without them. it was like an extra, "i'm doing this, i can do this, look at my progress!"

i am trying to take a more active role in the site's development (❤ unicorn) and have identified the following problems with the previous toast implementation:

1) they stacked horizontally, obscuring the screen.
2) interacting with them increased their screen time & often caused them to glitch, forcing manual dismissal
3) there was an internal stack longer than the on-screen stack, so even trying to dismiss them was futile.

all in all, this lead to far more on-screen time and user interaction than intended.

so, in theory, if we could eliminate these issues, we would have a major uptick in perceived listener effectiveness and overall happiness with the site, huh?

i propose the following implementation (detailed description to follow):

0) (there is no user interaction with toasts.)
1) starting at the upper left hand corner, under the top menu, the toast slides out from the left.
2) toast is fully displayed for ~4.25 seconds
3) toast squishes horizontally to directly under path
4) toast slides up into path (so user knows where to click to track these things)
5) a totally cute +1! bubble pops out so you know you're doing great!

feedback welcome and code to follow, much love ❤