Making Multiple Things Happen at Once Using Scrolltrigger with a Timeline

[Samalander]

I have a timeline of animations that should happen based on the scroll position. How can I make two things happen at the same time? I've spent around an hour trying to figure this out so thought I would post here.

 

Thanks

 

See the Pen qBxQzBy by samalander0 (@samalander0) on CodePen

[GreenSock]

You're gonna love the position parameter: 

 

 

In your case, you've got several options: 

tl.to(".p1", {opacity: 1, duration: 1})
  .to(".p2", {opacity: 1, duration: 1})
  .to(".p3", {opacity: 1, duration: 1}, "<") // <- position parameter to the rescue

Or if you're fading them both in at the same time, you can just use the same tween:

tl.to(".p1", {opacity: 1, duration: 1})
  .to(".p2, .p3", {opacity: 1, duration: 1}) // <- selector text can target multiple elements

Does that clear things up?