如何解决为什么我的动画突然停止播放?
我对此很陌生,并且正在遵循一个基本教程来使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。