015 - Animated Notifications

Date: June 26th 2020

One of the missing features of Life of Plastic was a notification system that created a log of evertime a piece of plastic went through a system. I wanted to be able to show all the different processes and keep track of how plastic moved. In the code there were many times that I could have added a addNotification() that would build a string of the evernt and save it to the state. Then based on this array of string I could use Framer Motion to add and remove notifications through an animating feed. This will be my attempt to create this:

Steps to take:

  1. Add a State and buttons to ADD and REMOVE items
  2. Render the state in a stylized component
  3. Automatically remove the last item when list is too long
  4. Animate the rendering so it ticks items in
  5. Limit the visible size of the list so it can be scrolled up to find logs

    Took a little longer than I expected but I got everything in place. Can now export this as a styalized component that will take in the array of notifications.