TweenMax Rotate Issue

Question

I am trying to rotate this Svg but when the animation is over it jumps and starts again I want the linear animation which runs forever without the snap.

I tried changing ease but nothing work

I just want it to run smooth as animation and not snap after each animation

<svg
                id="menuBtn"
                className="SVG"
                width="343"
                height="179"
                viewBox="0 0 343 179"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <g id="Group 1">
                  <rect
                    id="Rectangle 1 one"
                    width="343"
                    height="31"
                    rx="15.5"
                    fill="#C4C4C4"
                  />
                  <rect
                    id="Rectangle 3"
                    y="74"
                    width="343"
                    height="31"
                    rx="15.5"
                    fill="#C4C4C4"
                  />
                  <rect
                    id="Rectangle 2"
                    x="116"
                    y="148"
                    width="227"
                    height="31"
                    rx="15.5"
                    fill="#C4C4C4"
                  />
                </g>
              </svg>

GSAP Animation JS

  TweenMax.to(el, 6, {
    rotation: 360,
    ease: "none",
    repeat: -1,
    transformOrigin: "center",
  });

Answer 1

You use old gsap2 syntaxis, please check how to migrate to gsap 3

Check it with gsap3 i don't see any snap:

gsap.to('#menuBtn', {
  rotation: 360,
  ease: "none",
  repeat: -1,
  transformOrigin: "center",
  duration: 6
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
<svg
  id="menuBtn"
  className="SVG"
  width="343"
  height="179"
  viewBox="0 0 343 179"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <g id="Group 1">
    <rect
      id="Rectangle 1 one"
      width="343"
      height="31"
      rx="15.5"
      fill="#C4C4C4"
    />
    <rect
      id="Rectangle 3"
      y="74"
      width="343"
      height="31"
      rx="15.5"
      fill="#C4C4C4"
    />
    <rect
      id="Rectangle 2"
      x="116"
      y="148"
      width="227"
      height="31"
      rx="15.5"
      fill="#C4C4C4"
    />
  </g>
</svg>