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

Posted 2023-05-08

【中文标题】我可以在 ScrollTrigger 中使用 span 而不是 div 吗？

【英文标题】：Can I use a span instead of a div with ScrollTrigger?

【发布时间】：2021-04-18 07:40:49

【问题描述】：

在我的 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
)

【参考方案1】：

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