为什么我的动画突然结束时不和谐？

Question

我对此很陌生，并且正在按照基本教程使用 gsap 创建一个紧身的文本效果，我注意到当我暂停鼠标光标时，有一个非常刺耳的运动，文本突然朝光标。我不知道是什么原因造成的，想知道是否有人能告诉我为什么会这样。

document.addEventListener("mousemove", e => {
  gsap.to(".title", {
    x: e.clientX,
    y: e.clientY,
    stagger: -.02,

  })
})

body {
  background: #111111;
}

.title {
  font-family: Helvetica;
  font-size: 12vw;
  font-weight: 600;
  -webkit-text-stroke: 2px rgb(238, 238, 238);
  color: #111111;
  transition: all 100ms ease-in;
  user-select: none;
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
}

#title-container {
  width: 100vw;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

<body>
  <div id="title-container">
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
  </div>

</body>

我想尝试阻止这种末端磁力，但我不确定是什么原因造成的。我试过摆弄轻松功能，但这似乎丝毫没有影响。导致它发生的代码是否存在根本性错误？有没有更好的方法来完全做到这一点？感谢帮助，谢谢。

Answer 1

问题是您有 transition css 属性，您不需要它，它与 gsap 所做的冲突。只需评论或删除它就可以了

document.addEventListener("mousemove", e => {
  gsap.to(".title", {
    x: e.clientX,
    y: e.clientY,
    stagger: -.02,
  })
})

body {
  background: #111111;
}

.title {
  font-family: Helvetica;
  font-size: 12vw;
  font-weight: 600;
  -webkit-text-stroke: 2px rgb(238, 238, 238);
  color: #111111;
  /* transition: all 100ms ease-in; */
  user-select: none;
  box-sizing: border-box;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
}

#title-container {
  width: 100vw;
  height: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

<body>
  <div id="title-container">
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
    <div class="title">Def(x)</div>
  </div>
</body>

为什么我的动画突然结束时不和谐？

Why does my animation suddenly end do jarringly?

html

javascript

css

gsap