Horizontal scroll issue

[Dave Dublin]

Hi

In a horizontal scroll, is there a setting that stops the previous content from disappearing (continuing to scroll), and having the next block visible while the horizontal scrolling is happening?

 

If I am not making sense, please see the screenshot:

I want the title 'horizontal header" not to disappear when the block are scrolling sideways.

And also for the footer (red) block to be visible. So to look like the screenshot, while the side scroll is happening.

 

The horizontal header block isn't full height, so the page is looking very empty while the horizontal scroll is happening, see last screenshot.

 

Any help would be appreciated

 

Thanks

Dave

See the Pen bGMBOaV by davedublin (@davedublin) on CodePen

[Rodrigo]

Hi Dave,

 

The best and simplest solution I can think of, is adding the header in the pinned section.

 

I forked your example and this is how it looks:

See the Pen qBYqwBV by rhernando (@rhernando) on CodePen

 

Let us know if this is what you're after or if you want to achieve something else.

 

Happy Tweening!!!

[Dave Dublin]

Thanks Rodrigo

It wasn't exactly what I was looking for, but this should well though thanks.

 

One other question if you don't mind.

Is it possible for the horizontal animation to finish, and continue the normal scroll, when the last just block comes into view.

At the moment the horizontal blocks are half way across, by the time it scrolls down again.

I can't seem to get rid of all that spacing on the right.

See screen shot

[Rodrigo]

Hey Dave,

 

This seems to be working: 

gsap.to(boxes, {
  xPercent: -100 * (boxes.length * 1.1),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal_wrap",
    pin: true,
    markers: false,
    scrub: 1,
    snap: 1 / boxes.length,
    start: "top-=40% top",
    end: "+=3000"
  }
});

I updated the code-pen.

 

Another alternative would be the container animation. Here you can check how it works:

 

Happy Tweening!!!

[Dave Dublin]

Hi Rodrigo

 

Thanks for doing that. What I was looking for though was to the vertical scroll to happen just as the last block has entered the viewport.

So for example, when the last below block is visible, the side scroll stops.

 

I think I may have gotten close enough with, just not sure what it all means.

I changed: 

xPercent: -100 * (boxes.length - 1),

to
 xPercent: -100 * (boxes.length - 1.9),

 

Thanks again