DiegoM

Finally I used math to not rotate the line, I hope someone still can help with a workaround for this, thanks!

Hello! I'm trying to rotate a line that changes the center of rotation. The thing is that when the center is changed it looks like it is affected by the rotation that already was applied to the element. How can I workaround this? Minimal example in CodeSandbox

Hello! I'm creating random triangles. For the exterior angle I'm using an svg Line, the thing is that I'm passing the center of rotation as a prop to a react component, but the rotation works well just the first time. This is the component: const LineExtension = ({centerX, centerY, rotation, length}) => { let [tl] = useState(gsap.timeline()) useEffect(() => { tl.to(`#line`, {rotation: -rotation, svgOrigin: `${centerX} ${centerY}`}) }, [centerX, centerY, rotation, tl]) return ( <g > <line id="line" x1={centerX} y1={centerY} x2={centerX+length} y2={centerY} style={{stroke: "rgb(255,0,0)", strokeWidth:"1"}} /> </g> ); }; Hope you can help me, thanks!

Hello, I have this SVG, the line is shrinked when rotates. <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575.53 41.3" width="280px" transform="translate(0, 100)"> <line id="Diagonal" className="cls-1" x1="284.48" y1="21.15" x2="569.48" y2="21.15"/> <g id="Capa_2" data-name="Capa 2"> <g id="Capa_1-2" data-name="Capa 1"> <g id="Flecha_horizontal" data-name="Flecha horizontal"> <line className="cls-2" x1="571.72" y1="20.65" x2="1.72" y2="20.65"/> </g> <line className="cls-2" x1="552.53" y1="1.77" x2="572.53" y2="21.77"/> <line className="cls-2" x1="553.76" y1="39.36" x2="573.76" y2="19.36"/> <line className="cls-2" x1="23" y1="39.53" x2="3" y2="19.53"/> <line className="cls-2" x1="21.77" y1="1.94" x2="1.77" y2="21.94"/> </g> </g> </svg> I'm animating like this timeline.to("#Diagonal", {rotate: -value, transformOrigin: '0px 0px'}) Any idea why is this happening? thanks!