Overlapping sections

[ferriss]

Hi,

 

I've seen this example of scroll and pullover, but not seen the inverse of this.

 

Is it possible?

 

https://www.polybion.bio/

 

I've attached my base, I basically want to scroll and section one scroll up and once the bottom of section one hits the top, the next section pulls pull and then once the bottom of that hits the top, the next one pulls up.

 

Currently they all scroll, but section 2 should say fixed until section 1's bottom hits the top.

 

Thanks,

Tom

See the Pen bGjqdJE by CHEWX (@CHEWX) on CodePen

[Rodrigo]

Hi,

 

Mostly this has to do with initial setup. Also is better to create a timeline so you can add animations on each section (like in the website you posted).

 

Hopefully this approach is a good starting point:

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

 

Let us know if you have more questions.

 

Happy Tweening!

[ferriss]

Thanks for your post. The initial setup is for a reason as all sections need to be at the top in theory.

 

The example you’ve posted is the opposite I want, I’d like the inverse. So only the layer that’s on top will scroll. Underneath doesn’t scroll until top layer is out of view at the top.

[ferriss]

I've just updated the original pen with a working version, not sure if it's the best way to code it as adding the heights together seems an odd way to do things?

[Rodrigo]

Hi,

 

If it's working in the way you intend and you're getting the results you want/expect then there is nothing wrong with your setup. Perhaps the only thing I would change is use yPercent instead of passing a string to the y tween of each panel:

gsap.to( box, {
  // y: '-100%',
  yPercent: -100,
  ease: 'none',
  scrollTrigger: {
    trigger: '.block-overlap__section--' + ( i + 1 ),
    start: `+=${boxHeights}px top`,
    end: `+=${boxSize.height}px`,
    // markers: true,
    scrub: true
  }
});

That will work in the exact same way with the difference that GSAP won't have to parse the string you're passing and apply the percentage value directly on the transform matrix, like that you can pass a number. Normally for fully responsive animations we recommend using yPercent/xPercent since it's more intuitive once you get going with GSAP's syntax.

 

Happy Tweening!

[ferriss]

Great thanks.

 

I have a side-effect issue, whereby because each section is fixed. How do I apply other GSAP animations as the trigger positions are wrong, for example one section might be 100px from the top, but really you need to scroll 3100px to get to it, but because it's fixed the trigger start position is 100px.

[Rodrigo]

Hi,

 

It seems you figured it out by adding the current height to a variable in order to use that as the starting point of each section?:

// Start at height of first box
let firstBox = boxes[0].getBoundingClientRect();
let boxHeights = firstBox.height;

// Get boxes without first
boxes = gsap.utils.toArray('.block-overlap__section:not(:first-of-type)');
boxes.forEach((box, i) => {
  
  const boxSize = box.getBoundingClientRect();
    
  gsap.to( box, {
    y: '-100%',
    ease: 'none',
    scrollTrigger: {
      trigger: '.block-overlap__section--' + ( i + 1 ),
      start: `+=${boxHeights}px top`,
      end: `+=${boxSize.height}px`,
      scrub: true
    }
  });
  // Add to scroll height to determine next start point
  boxHeights = boxHeights + boxSize.height;
})

Please let us know if this is solved or you're still having issues as I see it working in the way you describe on your updated codepen example.

 

Happy Tweening!