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...

Geedix: Yes, that would be easiest but I figured I'd learn something about JS instead. I could just wrap the whole banner in a anchor tag... However, down the road I may need multiple buttons in an animation so this just seemed the best way for this example. Thank you though.

Well, think I solved the Arrow button issue... forgot about window.open()... had to have JQuery script added to my setup though... $('#arrow').click(function() { window.open('http://www.greensock.com'); });

@geedix a sheen effect possibly yes. For now, I think it sort of has that sheen effect... just a bit slower and jerky. I was hoping someone might take a look at the JS and say something "oh, you need to try this instead" or "here is a link to something similar". To me it doesn't have enough "sheen" or pizzazz yet. I had a terrible time trying to get it to look this good going one direction or the other. I haven't done anything with masks yet... maybe later though... As for the button... I would think there is a way to call an action... something like... $('#arrow').click(function() { //something here to send you to a URL }); I looked for that in JS but did not find anything that worked right. This banner will not be part of an ad network. It will just be on a web page sending you to another web page... like a call to action banner. Thanks for the help.

Alright gurus and noobs... I did a project years back in video editing but can't remember what Premiere called it. I think I also remember doing the same thing in Flash too. Anyway, as you can see in the Pen I have a simple banner that I would like to animate better. You can see my wipe effect is a bit off. I tried to use GS DevTools to slow it down and reposition the elements but it was not the same as working with a visual timeline. I'm used to visual tools more than code right now. So how do I pretty it up and make it cool (besides cooler graphics)? I'd also like to figure out the best use of easing too. The other elements seem dull. I tried a few but they were a mess. Last but not least... the arrow button... How do I add in the action that sends you off to a URL once the button is clicked? As always, your input and help with learning is much appreciated. PS. If this type of request has been addressed in the past... I can't believe I would be a first with this... please shoot me some Pens or links to other GS threads. Thank you...

@PointC ... thank you. I converted the text to curves this time around just so that I didn't have to mess with more CSS and font issues. I was anxious to get into the animation and curves make that faster for me as a beginner. I also realize that if I left them as SVG text, my file size and cut and paste would be much easier. Texts as curves adds a lot to a script. As I embed this into WordPress and the DIVI theme (probably any theme), all the extra code almost chokes the template. For now... curves... Later I will probably adjust my code and the SVG to include SVG text. Thanks for the suggestions and help though. And even more useful information.

@akapowl ... Yes, makes perfect sense. This will definitely come in handy down the road. Thanks for the extra, extra schooling...

@akapowl ... that fixed it. Thank you. Now if I might ask... where do I learn more about how you came up with "gsap.utils.toArray("#orbitGrp g g");"? I'm familiar with arrays and know how to use them from other language experience. I am unfamiliar with the use of gsap.utils.toArray (probably in the GSAP docs) and how you knew how to take my SVG group ID #orbitGrp and break it down by g and g. I would never have known or even guessed to add another g to that. Is this just my lack of JS knowledge? Thanks again to everyone. I think I can finally put this project to bed now. There is a lot of useful information in this thread. Lots of different approaches and solutions. I appreciate all the schooling

@akapowl ... I see that it is working just fine on your pen. I added the bits of your JS that mine was missing. If you look back on my pen previous to your reply, you will see that something isn't quite right. The white text is out of sync... probably because your pen is an older version of mine and different. I've tried changing a few things to accommodate but it just kept coming back as out of sync. What am I missing?

Okay, good morning folks. I have been tinkering all night and part of this morning trying to get the text in the highlighted green circle to also change to white using @PointC 's solution. I had to make a change to part of the graphic for the project anyway so I organized my SVG a little better to accommodate. All the code still works as PointC had last created but some of the IDs changed. The hierarchy goes like this now... <g id="orbitGrp"> <g id="orbit8"> <circle id="circle8" fill="#BACF45" cx="123.6" cy="123.62" r="64.129"/> <g id="txt8"> <path fill="#596774" d=" In the JS that PointC put together he has "const targets = gsap.utils.toArray("#orbitGrp circle");" but how would I create something like "const targets = gsap.utils.toArray("#orbitGrp path");" and only select all the path to fill with white? I rearranged the SVG so that the whole orbit was grouped and inside that the circles were grouped with the text thinking this would help. I also tried adding a class to all the paths (text that I want to change) and calling that by something like "const whiteTxt = gsap.utils.toArray("#orbitGrp .txt");" but couldn't get that to work either. I've been using console.log() to check and most attempts came up with undefined or errors. I've probably been staring at this one too many times now. Using PointC's code below... what is the easiest and most effective way to not only change the circle color but also the text color. The text was converted to curves... Thanks in advance... https://codepen.io/cr33ksid3/pen/2b6a25e3acba2ec46cdc003e1a93d39d

Yep, have watched his GSAP 3 Express now twice... Working on the others and trying to put some projects together as well. Still can't soak enough in fast enough and get it to stick. Part of it shows in this thread. Each person who helps me has a different way of doing things... and they all kind of work. That is fantastic... Until someone like me who confuses easily when trying to learn and hack things together. Then I get a mix of things that work and there is always something broken. As I mentioned earlier, I don't just want to hack things together and get them to work... I want to understand why it works and how that person came up with that way of putting it all together. So, @Carl has been a big help... and I hope he is able to continue putting more tutorials/courses together. He explains everything in great detail I think. Great examples and slow enough for me to keep up. Same goes for all the learning on Greensock. Keep them coming and thank you. Tomorrow morning I am going to try and figure out how to change the grey text along with the highlighted circle too. I gave up tonight and have to work on some artwork... Thanks @PointC for the help.