在 Elementor 中使用 Gsap 将交错效果入口动画添加到标题

Question

我需要一些帮助来在 Elementor 中对标题文本进行动画处理。具体来说，我想创建一个入口动画，其中每个字母从底部一个接一个地滑入，创建交错效果。您能指导我如何实现这一目标吗？预先感谢！

我尝试了下面的代码，它仅在页面加载时才有效。仅当标题文本的一部分在用户屏幕上可见时，如何才能使其工作？

<style>
.char {
    transform: translateY(200px);
    transition: transform .8s ;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

<script>
       const myText = new SplitType('h1')

        gsap.to('.char', {
            y: 0,
            stagger: 0.02,
            delay: 0.5,
            duration: .1,
           
        })
 
</script>

Answer 1

要在进入视图时触发动画，您可以使用名为

ScrollTrigger

（docs）的 gsap 插件。