it seems I didn’t quite understand you, or I didn’t explain it well, I know how to change the background when the first panel reaches 50%, but how to change the background of the next ones so that each panel has its own color, I tried to do this, but the panel changes color only 1 time per black
const colors = ['#F5EBFF','#EEF8FF', '#000000']
ScrollTrigger.create({
trigger: "section.black",
scroller: ".scroller",
start: () => "top -" + (window.innerHeight * 0.5),
onEnter: () => {
console.log('color', colors[i])
gsap.to("body", { duration: 1, backgroundColor: colors[i], overwrite: 'auto' });
},
onLeaveBack: () => {
gsap.to("body", { duration: 1, backgroundColor: i === 0 ? '#ffffff' : colors[i-1], overwrite: 'auto' });
},
invalidateOnRefresh: true
})