[scrollTrigger: Can you switch start/end values based on the current element in view?]

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.

 

See the Pen ExvKzvB by cssgirl (@cssgirl) on CodePen

 

Many, many thanks @Cassie!

[scrollTrigger: Can you switch start/end values based on the current element in view?]

Hey, I fixed the privacy on the pen.

 

Thank you so much for your quick response - I'll try that out. Appreciate it!

[scrollTrigger: Can you switch start/end values based on the current element in view?]

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!

See the Pen 3a3369a2fc62b853670c6ecbbfdc5ee2 by cssgirl (@cssgirl) on CodePen