To make the ScrollTrigger work within the .content-box, you should set the trigger element to be the .content-box itself. Here's how you can modify your JavaScript code:
gsap.utils.toArray(".content-box").forEach(box => {
console.log("panel");
var tler = gsap.timeline({
markers: true,
scrollTrigger: {
markers: true,
trigger: box, // Change the trigger to the content-box
toggleActions: "restart restart restart pause",
onEnter: () => onEnter("panel"),
onEnterBack: () => onEnterBack("panel"),
},
});
});
