GSAP MotionPath - движение по path не той стороной

Пример в CodePen

Есть объект ".main__rect", который двигается по траектории (path)

При активации свойства "autoRotate", объект должен поворачиваться вслед за кривизной path

Но почему-то "передом" объекта при движении всегда является правый бок. Я пробовал экспериментировать с траекторией - без изменений

Почему так происходит? И есть ли какой-то способ указать объекту "перед"? Чтобы он двигался по траектории нужной мне стороной (где написано top)

HTML

<section class="main">
    <div class="main__wrapper">
        <div class="main__rect">top</div>
    </div>
</section>

CSS

.main {
  &__wrapper {
      width: 100vw;
      height: 100vh;
      position: relative;
  }
  &__rect {
    width: 15vw;
    height: 25vw;
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #bf5abf; 
    text-align: center
  }
}

JS

gsap.timeline({
    duration: 1,
    scrollTrigger: {
        trigger: '.main',
        start: "top top",
        end: "+=2000",
        scrub: true,
        pin: true,
    }
})
    .to (".main__rect", 1, {
    motionPath: {
        path: 'M154,614s57-1,46-60-15-67,23-88,47-67,35-86-26-66,29-72',
        align: "self",
        alignOrigin: [0.5, 0.5],
        autoRotate: true,
    },
    },0)