Rect stroke and scale, rotate

[Yaya]

Hey gsap fans!

I'm in the middle of Carl's gsap express final project course and decided to apply the lesson to an actual project. Sometimes, I Google things and get outdated information. For example, I used to have the stroke set to #000 so that I could animate it; but that didn't work. I had to remove the stroke color inside the svg itself for the javascript to work.

1) Anyway, would you mind checking why I cannot seem to change the stroke and scale of 2 rectangles? They are "spokes" of the forklift wheels so I can imply the wheel is rotating.

Here one of 2 rectangles that I'm targeting:

<rect id="tire-front-spoke" x="113.74" y="135.83" width="13.45" height="2.71" transform="translate(-62.09 134.98) rotate(-48.02)"/>

2) I haven't had much luck with the rotating code yet. MotionPlugin? Rotation css plugin? Do I have to remove transform from the html and then gsap.set it?

BTW, Carl's lessons rock! @Carl

Cheers,
Mary

See the Pen rNYxogJ by yayaCreates (@yayaCreates) on CodePen

[OSUblake]

Hi Yaya,

1 hour ago, Yaya said:

For example, I used to have the stroke set to #000 so that I could animate it; but that didn't work. I had to remove the stroke color inside the svg itself for the javascript to work.

 

That doesn't make sense. Do you have a demo where the JavaScript is broke.

 

I would probably just set the color in your CSS so you don't see the color change when the JavaScript loads.

 

And when you want to transform an element inside an <svg>, like with scale or rotation, you will usually need to set the transform origin. You only need to set it once, and for your spoke it looks like the best place is the left bottom.

 

And for the rotation, you usually just need to animate the rotation to 360, but because the spokes are already rotated, notice the rotate transform, we will need to add 360 to the current rotation using a relative value, "+=360".

 

<rect id="tire-front-spoke" x="113.74" y="135.83" width="13.45" height="2.71" transform="translate(-62.09 134.98) rotate(-48.02)" />

 

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

 

[Yaya]

@OSUblake thanks for such a detailed response.

I do not have a javascript example where it is broke, with the stroke color indicated inside the svg. I will go ahead and use css instead of gsap.set for those colors, per your suggestion.

Rotation is the winner over motionPath in this case, I see, with transformOrigin. I appreciate that.