我可以在 ScrollTrigger 中使用 span 而不是 div 吗？

问题描述

在我的 HTML 代码中，我在 <span> 中有几个 div 标签，我想使用 GSAP 的插件 ScrollTrigger 为它们设置动画。但是当我使用 span 元素而不是几个 <div> 标签时，它似乎不起作用。代码如下：

HTML：

<div class="big-Box">
  <span id="Box">The</span> 
  <span id="Box01">rain</span>
  <span id="Box02">slacked</span> 
  <span id="Box03">still</span> 
  <span id="Box04">more.</span> 
  <span id="Box05">They</span>
  <span id="Box06">crowded</span> 
  <span id="Box07">to</span>
  <span id="Box08">the</span> 
  <span id="Box09">huge</span> 
  <span id="Box10">door.</span>
  <span id="Box11">The</span> 
  <span id="Box12">rain</span> 
  <span id="Box13">stopped.</span>
</div>

JS：

gsap.registerPlugin(ScrollTrigger);

let t1 = gsap.timeline();

t1.to("#Box",{
  scrollTrigger:{
    trigger: "#Box",start: "top 80%",end: "top 25%",scrub: true,markers: true
  },x: 1000
})

解决方法

ScrollTrigger 以跨度为目标工作正常。您正在应用的 transform 不适用于跨度，因为它们的 display 为 inline。将显示更改为 inline-block，您会看到它工作正常。