cssgirl

Hello again! I took the updated code you provided and forked a new pen. I made a few tweaks for timing to get the background color transitions closer to what I am aiming for and it is looking way closer to what I wanted. I'm going to keep tweaking until I get the timing a bit smoother, but this is pretty close to what I was attempting to achieve. https://codepen.io/cssgirl/pen/ExvKzvB Many, many thanks @Cassie!

Hey, I fixed the privacy on the pen. Thank you so much for your quick response - I'll try that out. Appreciate it!

Hello! 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!