我可以在 ScrollTrigger 中使用跨度而不是 div 嗎？

Question

在我的 HTML 代碼中，我在div中有幾個<span>標簽，我想使用 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
})

Answer 1

ScrollTrigger 以跨度為目標工作正常。 您正在應用的轉換不適用於跨度，因為它們display為inline 。 將顯示更改為inline-block ，您會看到它工作得很好。