0

In my HTML code I have several <span> tags inside a div, and I want to animate them using GSAP's plugin ScrollTrigger. But it doesn't seem to work when I use the span elements instead of several <div> tags. Here's the code:

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
})
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
Rafael Murta
  • 9
  • 1

1 Answers1

2

ScrollTrigger is working fine with the span as a target. The transform that you're applying doesn't work with spans because of their display property has the value inline by default. Change the display to inline-block and you'll see it working just fine.

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147