[英]Can I use a span instead of a div with ScrollTrigger?
In my HTML code I have several <span>
tags inside a div
, and I want to animate them using GSAP's plugin ScrollTrigger.在我的 HTML 代码中,我在
div
中有几个<span>
标签,我想使用 GSAP 的插件 ScrollTrigger 为它们设置动画。 But it doesn't seem to work when I use the span elements instead of several <div>
tags.但是当我使用 span 元素而不是几个
<div>
标签时,它似乎不起作用。 Here's the code:这是代码:
HTML: 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: 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 is working fine with the span as a target. ScrollTrigger 以跨度为目标工作正常。 The transform that you're applying doesn't work with spans because of their
display
of inline
.您正在应用的转换不适用于跨度,因为它们
display
为inline
。 Change the display to inline-block
and you'll see it working just fine.将显示更改为
inline-block
,您会看到它工作得很好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.