ScrollTrigger sidebar pinned overlaid sections

[deantek]

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

[deantek]

@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]

 

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]

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]

 

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

 

[Alexo]

Hi All,

 

Hope I am not doubling up on the questions/issues here but I have been working on

See the Pen QWdrYjO by davidbwaters (@davidbwaters) on CodePen

 paired with @Cassie's amazing SVG masking pen

See the Pen RwRORqB by cassie-codes (@cassie-codes) on CodePen

 which are both great for learning!

 

As I am relatively new to this library I have been completely stumped by a transform bug that is going on in David's pen and mine. I know the reason it is occurring but am unsure what the best way to re-calc the number of items there are to fit the scroller.

 

I have this forked pen here as a simple example

See the Pen QWJppze by alex-rankin (@alex-rankin) on CodePen

 

This SCSS is taking the 140vh height and * by the amount of --items (in this case 3)

.c-fluid-reveal {
	--fluid-reveal-section-height: 140vh;
	height: calc(var(--fluid-reveal-section-height) * var(--items));
}

 

The issue that is occurring is when you reach the scrollers 'end'  a transform is tagged onto the wrapper '.c-fluid-reveal' which is *3 the height of the fluid section. If you watch '.c-fluid-reveal' in inspect you can see it goes from  

transform: translate(0px, 0px);

Too

transform: translate(0px, 1510px); Or depending on your screen height

 

How can I avoid this from occurring?

 

Hopefully this isn't a super dumb question but has left me scratching my head haha

 

Cheers

Alex

[Rodrigo]

Hi @Alexo,

 

Just use pinSpacing: false in your ScrollTrigger config:

tl = gsap.timeline({
  ease: "none",
  scrollTrigger: {
    trigger: wrapper,
    start: "top top ",
    pin: true,
    pinSpacing: false,
    end: "bottom bottom",
    scrub: 0.4,
    markers: true
  }
});

From the ScrollTrigger docs:

pinSpacing

Boolean | String - By default, padding will be added to the bottom (or right for horizontal: true) to push other elements down so that when the pinned element gets unpinned, the following content catches up perfectly. Otherwise, things may scroll UNDER the pinned element. You can tell ScrollTrigger not to add any padding by setting pinSpacing: false. If you'd rather it use margin instead of padding, you can set pinSpacing: "margin". Note: pinSpacing works in most cases, but it really depends on the way you set up your DOM and CSS. For example, if you pin something in a parent that has display: flex or position: absolute, the extra padding won't push other elements down/right so you may need to manually space things out. pinSpacing is just a convenience that works in most situations. Important: if the container is display: flex, pinSpacing is set to false by default because that's typically what is desired since padding works differently in that context.

 

Also check this video @Carl made

 

Also that ease: "none" should be in the Timeline's defaults configuration, like this:

gsap.timeline({
  defaults: {
    ease: "none",
  },
  scrollTrigger: {
    // ...
  }
});

Hopefully this helps.

Happy Tweening!

[Alexo]

Hey @Rodrigo,

 

Thanks so much for the quick response!

 

Setting pinSpacing: false does remove the pin spacing as @Carl's video explains (very helpful)

 

However, the transform still gets applied transform: translate(0px, 1651px); at the end of the scrollTrigger. Changing the end of the scroll just end: "bottom" fixes this but creates an overlap. I am aware that this is due to the pin applying this.

 

Am I right in thinking I need to calculate the real ending of the scroll trigger with a +=100 or the correct amount here? I did play around with setting the end at the footer blocks end but this did not work as expected

 

I have updated my pen accordingly with the new changes and some colors to help display this better

See the Pen PoxpaKr by alex-rankin (@alex-rankin) on CodePen

 

Cheers

[Rodrigo]

Hi,

 

Unfortunately I don't have a lot of time to go through all your code right now but this seems more related to something else, because there is a jump in the scroll bar as soon as you hit the end point of the ScrollTrigger.

 

Also considering what you're trying to do I think a better and simpler approach could be this:

See the Pen eYQYxJW by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[Alexo]

Hey,

 

Thanks for that! That helped quite a bit, I have solved the issue I had.

 

I built out this pen using one of the gsap examples to get a better foothold on what/how pinning was working like

 

See the Pen vYQxaqg by alex-rankin (@alex-rankin) on CodePen

 

I ended up changing the way the end is calculated to account for the item's length - the last one. Then also removed the calculation that handled that length in scss to a fixed height! Which is now working in my personal project (lots of struggle/iterations went into this in the last day lol)

 

Cheers