为什么我的动画突然停止播放？

编程问答 2022-08-13

问题描述

我对此很陌生，并且正在遵循一个基本教程来使用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>

我想尝试防止这种最终磁性，但我不确定是什么原因引起的。我尝试过使用缓动函数，但这似乎丝毫没有影响。导致它发生的代码有根本上的错误吗？有没有更好的方法可以完全做到这一点？感谢您的帮助，谢谢。

解决方法

问题是您拥有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>

gsaphtmljavascript