Hi, currently you are animating everything at the same time and based on the same trigger. As you already guessed you'd have to loop through the different elements and create animations/scrolltriggers for each element.
Look at this JS code, particularly at the forEach portion and how the ScrollTrigger uses the element reference as the trigger:
let banners = document.querySelectorAll(".banner")
banners.forEach( (element) => {
let background = element.querySelector(".background")
let headings = element.querySelectorAll("h1, h2")
let tl = gsap.timeline()
.from(background, {backgroundPosition:"60% 0%", filter:"brightness(0.1)", duration:1})
.from(headings, {y:200, stagger:0.1}, 0)
ScrollTrigger.create({
trigger:element,
start:"top 90%",
toggleActions:"play none none reverse",
animation:tl
})
})
I can highly recommend using the https://www.creativecodingclub.com subscription for a month to learn about these basics. The js code above is from that.
My best,
T