cr33ksid3

@PointC Holy crap "Keep in mind that x/y attributes are different than x/y transforms" no I didn't. This will take some time to absorb. You guys all know this stuff. I feel like I just keep finding missing pieces... Yes #bg is the background rectangle. All my designs have a background that I can control. Why? To provide a boundary? I am now aware of the matrix() code and will just have to adjust from there. transform="matrix(0.9999 0 0 0.9999 49.6729 204.3335)" The transform above at least gives me a rough idea where my animated image should end up... x:50, y:204 before I remove it. Right?

@PointC That funky "matrix()" parameter is how Illustrator provides the coordinates for the final design or object placement. Getting rid of that would place the element in the top left corner. Top left corner is where the #turqCircle ended up after making your switch too. AND... #box2Animate (pink box) doesn't use "matrix()" parameters for initial placement but does use specific X/Y values. Must be the difference in object types I guess.

@PointC Let me just say that my SVG come straight from Adobe Illustrator CS6... I set their defaults to SVG 1.1 and have been using embed instead of link for images. The embed setting puts the "xlink:href="data:image/png;base64,iVBORw0KGgoAAAANS..." in the code for the image tag as well as that funky "matrix()" parameter. Should I be concerned about using Illustrator too now? I have tried animating a non-inline SVG, SVG included in an <img> tag, in the past without success to a degree. I cannot animate its individual elements unless it is inline. Sure, you can animate the whole SVG as non-inline... I will change the #turqCircle to xlink:href rather than src and see if that makes the difference in containing that circle within the 300x600 container. Not sure where it will place it yet though. What I attempted to show in the Pen was the fact that a <rect> object could be off set with .set() and animate back to its original placement. However, if you tried offset the inline SVG img and animate that back to its original position you had to specify funky x/y coordinates. I want to know why I guess and what is the easiest way to get the offset results. Thanks again for the extra help...

EXPLAIN TO ME WHY ... Why does #box2Animate, a <rect>, animate just fine from {x:31,y:-31}) to x:0,y:0 (its original placement within the SVG design) ... but #limeCircle <image> cannot go from {x:31,y:-31}) to x:0,y:0 the same way? The image is way off if you try that. Where is #limeCircle getting its origins? AND, #turqCircle isn't an embedded <image>, it is linked... I added this one by cut and paste directly to the original SVG code. Visually, why was it placed in the lower right of the design and not within the 300x600 container? All objects of an SVG should have a default top left origin, right? This makes no sense to me... Any tutorials or docs out there?

@PointC thank you again for all the pointers... That last response cut my code down tremendously. I knew there was a shorter method of doing this but only knew this at the time... Thanks for great moderation

Figured it out. My transparent circle in the group was not in the correct place. Placement matters.

Hopefully this is a simple enough Pen... So, I'm having trouble with transformOrigin and rotation I think. I thought it would be easy to rotate but as you can see, if you watch long enough, the center of each ring is off. Now, in my Illustrator SVG, I added a transparent outer ring(circle in the SVG) around each ring so that the grouped object would have a true center. Otherwise, if you have an object that is lopsided, the center would change right? Anyway, even with the clear ring around each ring group the center is still off. What am I missing here?

https://codepen.io/cr33ksid3/pen/wvgqwNd Now I think we have a winner. And if I do add a duration of 0 rather than the default of 0.5, there shouldn't be a slide fade in to the highlighted green and white. It should just be instantaneous right?

@PointC I had tried position parameters like this ".to(txt, 2, {fill:"white"}, "+=2")" but that did work. The sequence was still off. I had also tried it up in the master timeline like this ".add( changeColors(2),"+=2" )" but that didn't seem to work either. I will get rid of the "new" and add a "repeatDelay:2" and see what that does. And yes, I want each circle/text to change and then wait for 2 seconds before moving on to the next circle/text in the sequence.

@PointC yes, I had found that he had removed the duration. Did not know I was using old GSAP though. If I add a duration of 2 seconds like you have in new GSAP... the time the new green highlight appears is 2 seconds but I want it to change instantly to that green not fade into the green highlight color and white text. Would I use something like "ease:Linear.easeNone" (didn't seem to work for me) to elminate that fade? And if so, the whole point of the duration set to 2 seconds is so that the green highlight and white text stay on the screen for 2 seconds before moving on to the next.

@Carl so in your Fork it looks like you removed the pause all together... I will look into the position parameter as mentioned. It also looks like you got rid of my tweens and replaced them with "yoyo:true" instead. Is that why you used yoyo? That eliminates the use of .set() as well. @PointC I wondered how that was handled... If you fork them though, you end up with a bunch of duplicates in your Pen profile ... and you shouldn't delete them or it messes up these threads right? Seemed kind of lame considering the small change in the return line but I will keep that in mind for future Pens. So, instead of ".to(circle, 0, {fill:""})" to return the objects to their original state... just use ".set(circle, {fill:""})"? Or now the way Carl mentioned... And yes, I think I have enough to finish this part of the project. Its not completely done though... eventually I want to figure out how to have a small block of text appear in that large grey circle when each smaller circle highlights. Not tonight though... I have some tutorials to work on... thanks both of you again...

@PointC I wondered how that was handled... If you fork them though, you end up with a bunch of duplicates in your Pen profile ... and you shouldn't delete them or it messes up these threads right? Seemed kind of lame considering the small change in the return line but I will keep that in mind for future Pens. So, instead of ".to(circle, 0, {fill:""})" to return the objects to their original state... just use ".set(circle, {fill:""})"?

@Carl well... that presented a new animation... still not what was expected. And the master timeline doesn't want to repeat either. I will have to look at this a bit harder later tonight when everyone is asleep...

@Carl the function is supposed to take the new "i" value and populate the new timeline so that it fires each of the tweens... if it returns itself, is that where the undefined errors come from in console log? I wouldn't think that returning itself would be a problem since the next part of the master timeline just grabs and does the action of the next in sequence. I guess it does though... I changed the call back line to "return changeColors(change);" and it highlights the first circle/text correctly with no "undefined" errors. However, the master timeline does not move on to the second in the sequence... nor third... etc... @PointC same possible graphics... a different type of animation. I tried to start with what I had learned from those examples but could see the logic in my head, so I built it this way. I'm going through Carl's tutorials several times, Greensock's, and several courses on Udemy hoping that eventually I will be able to troubleshoot these myself. Every time I learn something new. This time may be why a function returning itself is causing my headache with this project. I have been doing these tutorials but also trying to implement things I've learned into real projects. So far, with help, I am stumbling along and learning... Thank you all...

So gurus, I've been messing with this for some time now. I hope it is minimal enough. I'm having trouble with master timelines and trying to reuse one function for 8 color changes that should go clockwise one right after the other. If possible, please do not change it from master timelines and functions. It confuses me as a beginner. I think I am close but it isn't functioning properly yet and in the console I still get undefined errors. What am I missing? And did I set up the function correctly with the variable "i"? I am trying hard to avoid one long timeline of tweens if possible. I had that working and it looked like a mess... but master timelines and functions are throwing me for a loop again...