Moving Circle According to Data/having stationary movement - Uncaught TypeError: Cannot assign to read only property 'cy' of object '#<SVGCircleElement>'

[babycheeses]

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 

See the Pen aOZOwj by sdras (@sdras) on CodePen

, 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

See the Pen WdeLMm by osublake (@osublake) on CodePen

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.  

See the Pen bJVJxZ by azhao (@azhao) on CodePen

[Carl]

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:

 

See the Pen qwZOJz by GreenSock (@GreenSock) on CodePen

 

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.

 

[babycheeses]

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! 

1 hour ago, Carl said:

svg circles do not have cx and cy properties or css values, they have cx and cy attributes. 

 

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? 

[Carl]

No need for a new thread, but thanks for asking.

 

You can't nest plugin values inside each other, so tweening attr plugin values inside the bezier plugin isn't going to work. However with SVG circles you can animate their css transforms so it is totally possible animate their x and y using bezier plugin

 

See the Pen GLZNZB?editors=1010 by GreenSock (@GreenSock) on CodePen