Prototype for a Mobile Accumulator


See the Pen Animated Aggregator by Jonathan Sullivan (@jonsully) on CodePen.0

The entire purpose of this particular pen was to solve an issue of creating a responsive solution for an accumulator interface. The animation involved gives the user the cues necessary to understand the impact of clicking one of the list items: the item clicked is being moved into another area, and added to a list with a limited number of slots. The downward animation guides the eye vertically to the bottom where a collapsed second column of the accumulator receives the object. A color flash indicates that the item has reached its destination and the number counter incrementing by 1 reinforces this result.

I’m going to make an effort to post more pens like these here, mostly as an exercise in my current efforts to learn CSS3 animations. I’m hoping that these might be helpful to anyone who might stumble upon them.

Like it? Fork it and let me know.