在我的HTML代码中，我在一个div中有几个<span>标签，我想用GSAP的ScrollTrigger插件来动画它们，但是当我用span元素代替几个<div>标签时，它似乎不起作用。
超文本：
<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>联森：
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条答案
按热度按时间shstlldc1#
ScrollTrigger在将span作为目标时工作正常。您正在应用的 transform 不适用于span，因为它们的
display属性默认值为inline。将显示更改为inline-block，您将看到它工作正常。