如何使用GSAP实现参考站点同款文字形变动画效果？

核心逻辑 #

该效果通过拆分文字为独立可控制的字符节点，配合GSAP的交错动画（stagger）实现波浪起伏效果，无需依赖其他复杂插件。

实现步骤 #

• 拆分目标文本的每一个字符为独立<span>标签，可使用GSAP官方的SplitText插件，也可手动拆分避免使用付费插件
• 为拆分后的字符设置display: inline-block，并将变换原点设置为底部中心，保证动画自然
• 绑定鼠标进入、离开事件，为字符添加带延迟差的Y轴位移动画，通过调整延迟差控制波浪的流动速度

代码示例 #

基础实现（含SplitText插件） #

<div class="hover-wave-text">示例文本</div>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.2/dist/SplitText.min.js"></script>
<script>
// 拆分文本为单个字符
const splitText = new SplitText('.hover-wave-text', { type: 'chars' })
const chars = splitText.chars

// 初始化字符样式
gsap.set(chars, {
  display: 'inline-block',
  transformOrigin: '50% 100%'
})

const textContainer = document.querySelector('.hover-wave-text')
// 悬停上移动画
textContainer.addEventListener('mouseenter', () => {
  gsap.to(chars, {
    y: -18,
    duration: 0.4,
    ease: 'power2.out',
    stagger: 0.05
  })
})
// 离开复位动画
textContainer.addEventListener('mouseleave', () => {
  gsap.to(chars, {
    y: 0,
    duration: 0.3,
    ease: 'power2.inOut',
    stagger: 0.03
  })
})
</script>

无SplitText版本（手动拆分字符） #

如果不想使用付费插件，可替换文本拆分逻辑：

const textContainer = document.querySelector('.hover-wave-text')
const rawText = textContainer.textContent
// 手动拆分字符
textContainer.innerHTML = rawText.split('').map(char => `<span>${char}</span>`).join('')
const chars = textContainer.querySelectorAll('span')

调整动画的位移距离、时长、stagger延迟数值即可匹配你需要的效果。

内容的提问来源于stack exchange，提问作者Md Habibur Rahman