使用 GSAP 实现类似打字机但更加丝滑的文字显示效果
0x00 功能演示
我要实现的效果是文字逐字显示,通过滚动进行触发,支持中断、回退、继续。
话不多说,先看效果:
0x01 实现思路
- 分割文字,以单个文字为单元执行动画
- 通过
scrollTrigger.scrub
设置停顿、控制动画触发、结束位置 - 初始状态将每个文字的
opacity
设置为 0 - 通过控制 stagger 确保动画执行的顺序,设置成比 duration 小可以有更好的过渡效果
function splitText(text) {
return text
.split("")
.map((char) => `<span class="text-animation">${char}</span>`)
.join("");
}
const line1 = document.querySelector(".line-1");
const line2 = document.querySelector(".line-2");
line1.innerHTML = splitText(line1.innerText);
line2.innerHTML = splitText(line2.innerText);
gsap.from(".text-animation", {
scrollTrigger: {
trigger: ".animation-container",
start: "top center",
end: "bottom bottom",
scrub: 1,
toggleActions: "restart none none reverse"
},
opacity: 0,
duration: 0.00001,
stagger: 0.000001
});
0x02 相关资料
如果对 GSAP 这两个 API 不太熟悉,可以看看下面的视频:
- ScrollTrigger: https://youtu.be/X7IBa7vZjmo
- From and FromTo: https://youtu.be/fXfI5qkF8dU