Hi and welcome to the GreenSock forums,
Thanks for the demo.
In the future, please try to simplify as much as possible. For instance we don't need paths with tons of points, or many paths. The simpler the data structure the better. That said there are 2 issues that jump out:
1: Your values for cx and cy seem to be undefined in your notWorking() function as shown by a simple log. Please add the console logs below to see the issue:
function notWorking() {
for (i=0; i < ids.length; i++) {
// selecting the circle
var p = document.getElementById(ids[i])
console.log("this is a problem" + paths[ids[i]].cx)
console.log("this is a problem " + paths[ids[i]].cy)
var tl = new TimelineMax()
tl.to(p, 0.24, {
cx: paths[ids[i]].cx,
cy: paths[ids[i]].cy,
ease: Linear.easeNone
})
}
}
2: svg circles do not have cx and cy properties or css values, they have cx and cy attributes. To animate those values with GSAP you need the AttrPlugin. Here is a basic example of how it works:
https://codepen.io/GreenSock/pen/qwZOJz
I think once you get proper values and pass them into the attr plugin you'll be in a better spot. If you still have problems, please try to reduce the amount of data a bit so that its easier to help. thanks.