JavaScript animation effect stack
You want a data structure that supports efficiently manipulating head and tail. Usually we call that a deque, a double-ended queue, sometimes implemented with linked lists.

As I look at your diagram, the containers on top and bottom in some sense hold the same R,B,Y sequence of items, just in cyclic permutation. So why don't you consider using a simple array of size N, with head and tail indices that you increment mod N ? Then you only incur expensive memory copies when an effect finally completes.