How to add triggers in timeline

[JPM82]

Is there a way to create triggers for each element in a timeline?  I'm still till learning how to use gsap most efficiently.  I've been using timelines to create my animations, but I want them to trigger at the right time, not just happen one after the other.  Sometimes this is what I want, but when there is a lot of content, I'd like the elements to appear as the user scrolls.  Can I do this within my timeline???  I've been using the relative timing function so far.
Here is an example:

 

const serviceContent = document.querySelector(".service-page-content");

const overviewTl = gsap.timeline({

scrollTrigger: {

trigger: serviceContent,

start: "top center+=50%",

},

defaults: { ease: "", duration: 2 },

});

 

overviewTl

.to(

".services--kicker",

1.5,

{

y: 0,

opacity: 1,

},

"kicker"

)

.to(

".services--list li",

0.5,

{

x: 0,

opacity: 1,

duration: 0.5,

stagger: {

each: 0.1,

onComplete: function () {

gsap.to(this.targets()[0], {

"--bullet-opacity": 1,

"--bullet-translate": 0,

});

},

},

},

"kicker+=1.1"

)

 

.to(

".services--header",

0.5,

{

y: 0,

opacity: 1,

},

"kicker+=.5"

)

.to(

".services--copy",

0.5,

{

y: 0,

opacity: 1,

},

"kicker+=.9"

)

.to(

".badge",

0.4,

{

opacity: 1,

y: 0,

stagger: {

each: 0.1,

},

},

"<"

);

 

[OSUblake]

Hi JPM82,

 

If you want different triggers, you probably shouldn't be looking at timeline, at least not a single timeline. That's a common mistake a lot of people make when they get started. Each trigger you want to use should be a different Tween or Timeline.