I am attempting to create an experience where as you scroll through a page the body background color changes based on an attribute value (data-bg-color) being grabbed from the current element in view as you scroll.
I have it working partially, but because I am using a faux horizontal scroll in one area that contains a set of panels it messes up when using the same start/end values as the vertical scrolling sections.
By default my start and end values use a calculation to determine the height of the start/end positions for vertical sections like:
start: () => (i - 0.25) * (innerHeight - 100),
end: () => (i + 0.25) * (innerHeight + 100),
And I'd like to switch to something like the following for my horizontal sections:
start: () => (i - 0.25) * (innerWidth - 100),
end: () => (i + 0.25) * (innerWidth + 100),
I thought I would be able to define a new start/end by defining a scrollTrigger that specifically targeted the items within the horizontal scrolling section, but it didn't work.
I may be approaching this completely wrong, but my question is - based on the the current element in view can we switch the start/end values of the scrollTrigger? Or maybe there is a different way to approach the start/end that I am missing that can apply to both the vertical and horizontal sections?
Any help or suggestions would be greatly appreciated! Thank you in advance!