ScrollTrigger sidebar pinned overlaid sections

[deantek 2 Likes (Newbie)]

thank you very much, for several days I could not understand why it does not work, you helped me a lot

[deantek 2 Likes (Newbie)]

@akapowl,  hi again i have been playing with your example here and i still can't figure out how to change the background when scrolling section.black it has the right element in it and when it reaches 50% i would like to change the background, first step, what i did is that when i reached half of section.orange i changed the color:

 

 

gsap.to("section.black", {
          scrollTrigger: {
            trigger: "section.black",
            scroller: ".scroller",
            start: () => "top 50%",
            onEnter: () => {
              gsap.to("body", {
                duration: 1,
                backgroundColor: "#F5EBFF"
              });
            },
            onLeaveBack: () => {
              gsap.to("body", { duration: 1, backgroundColor: "#ffffff" });
            },
            invalidateOnRefresh: true
          }
        });

but how, I can’t understand how to change the background further, I have already seen examples with several sections, everything can be done simply and clearly through a cycle, but I don’t understand how to do the same, but with one section in 400vh

 

my pen:  https://codesandbox.io/s/funny-tereshkova-y2xuk7?file=/src/App.js:1731-2246

[akapowl 5,222 Likes (Superhero)]

 

If you want it to trigger dependent on the progress of the scrubbed timeline for the images, you'll need to set the start according to start and end of that ScrollTrigger. See how they are being calculated for the ScrollTrigger in the forEach loop?

 

start: () => "top -" + (window.innerHeight * (i)),
end: () => "+=" + window.innerHeight,

 

The first panel has the index 0, so its start effectively is 'top -0', and its end is one window's height after that.

 

So if you want to trigger something when this scrubbed ScrollTrigger's progress is 0.5 that would translate to half a window's height in with that same trigger element, so...

 

start: () => "top -" + (window.innerHeight * 0.5)

 

See the Pen gOKaQve by akapowl (@akapowl) on CodePen

[deantek 2 Likes (Newbie)]

1 hour ago, akapowl said:

 

Если вы хотите, чтобы он запускался в зависимости от хода очистки временной шкалы для изображений, вам нужно установить начало в соответствии с началом и концом этого ScrollTrigger. Посмотрите, как они рассчитываются для ScrollTrigger в цикле forEach?

 

 

Первая панель имеет индекс 0, поэтому ее начало фактически равно 'top -0', а ее конец находится на высоте одного окна после этого.

 

Итак, если вы хотите вызвать что-то, когда прогресс этого вычищенного ScrollTrigger равен 0,5, это будет означать половину высоты окна с тем же элементом триггера, так что...

 

 

 

 

 

 

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
})

 

[akapowl 5,222 Likes (Superhero)]

 

If you want it to happen for each of your images, then set the ScrollTrigger up in the forEach loop over the images.

 

Adjust its start so it is the same as the start for the ScrollTrigger that is scrubbing the image-height plus half a window's height.

 

Set your colors-array up, so that it also contains the initial color as the first value and then target the colors like this in your callbacks.

 

// pseudo-code...

const colors = [firstPanelColor, secondPanelColor, thirdPanelColor, fourthPanelColor ]   


onEnter: () => {
  gsap.to("body", { duration: 0.5, backgroundColor: colors[i+1], overwrite: 'auto' });
}

onLeaveBack: () => {
  gsap.to("body", { duration: 0.5, backgroundColor: colors[i], overwrite: 'auto' });
}

 

See the Pen rNKORBb by akapowl (@akapowl) on CodePen