babycheeses

I'm trying to make an animated map of sorts by having markers show up on google maps at a certain time/after a certain amount of time has passed. I've only found one other post on how to move a marker, but can't seem to "select" the marker to change the opacity. I've got it working with setTimeout, but I would like the ability to scrub the animation, which seems to be quite difficult/slow without GS given the number of points I'm trying to animate. I've included a codepen with 2 points. https://codepen.io/azhao/pen/rgvXJq The only thing I can think of doing is to create all the markers with initial opacity of 0 and then change the opacity of them in the order that I want. Due to the crowdedness, I want the markers to "disappear" after a couple of seconds. (in the example, I thought it'd be easier to start with opacity at 1 and fade to 0 to show that the markers do show up correctly). Is there an easier way to debug this? ie some way to tell if I'm even selecting the google maps marker with greensock? I'm not sure how to start to figure out what's not working

Thanks for the tip, Carl -- my bad. Will keep that in mind in the future. (It was simplified to me because I had several times more circles and 100x more data points haha ><) I had a typo with the cx, cy being undefined in the notworking function, but this was the solution--did not know this. It's working now--Thanks so much! Just for closure sake, is it not possible to do this with the bezier plugin? I have the pseudo-stationary movement now with the non bezier method (does this have a proper name?), but don't understand exactly when to use one method over the other... Not sure if I should create a new thread, but since i have multiple circles and would end up with one timeline for each circle, is there anyway to create an id of some sort for the timelines so that I can just loop through the data once and select the appropriate timeline to add a tween to instead of looping thru the data each time for each circle/timeline?

I'm new to GS, so apologies for any poorly described things...I'm facing two issues. I'm trying to have circles move according to specific data I have for each circle, and I first tried to move an svg along a path like in this codepen by Sarah Drasner https://codepen.io/sdras/pen/aOZOwj, but there are instances where the circles should appear to stop momentarily but even when the data roughly repeats itself multiple times (they'll be different by 1-2), it doesn't seem to have any effect. (I'm not sure if it's visible from my codepen, but even when I tried manipulating the path points in Drasner's codepen, I wasnt able to create a pause). Consider that each data point represents an evenly spaced moment in time (like frames of a video), and I want the circle to hover for the equivalent amount of time that the data represents out of the total. eg one frame is 40 ms apart, so 10 frames of repeated data should mean that the circle is stationary/"moving to the same place" for 400 ms. I gave up on this method to try and tried the method in this example where I specify the duration/location of the movement for each data point, but cannot get it to work move at all. I'm not sure if it's because the sample rate is too fast, but I can't find anything about max/min durations for the .to. In both scenarios, I get this error Uncaught TypeError: Cannot assign to read only property 'cy' of object '#<SVGCircleElement>', but using the bezier method still works, so I just ignored it, but with the new method, it doesn't work and I haven't found anything anywhere about what this error means because I'm selecting the circle... In my codepen, I have a button for each method where you can see the error in the browser console but not the codepen console. https://codepen.io/azhao/full/bJVJxZ