So I took your advice, I created a slightly simpler version as an SVG and switched from .to() to .from().
https://codepen.io/aaron4osu/pen/qBxXbVX?editors=1010
when choosing the starting point with .from, rather than identify an x and y coordinate relative to the SVG, can I start all of the marbles from the center of one of the groups inside the SVG by ID? For example, all of the green colored marbles would begin from the center of the #greenDish element and go to their final spot.
For example #greenDish
gsap.from(".greenMarbless", {
opacity: 1,
y: -300,
x:-400,
// center of #greenDish
duration: 2.5,
ease:"power3.out",
stagger: 0.5
});