Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

11 Newbie

About cr33ksid3

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. @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
  2. @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.
  3. @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 wh
  4. 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?
  5. @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
  6. Figured it out. My transparent circle in the group was not in the correct place. Placement matters.
  7. 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?
  8. 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?
  9. @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.
  10. @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.
  11. @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 futu
  12. @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:""})"?
  13. @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...
  14. @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 se
  15. 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 tween