Vertical and horizontal layout structure.

[developerjames9 0 Likes (Newbie)]

I am looking to develop a layout on GSAP in which I require horizontal scroll for few sections. I have attached layout structure diagram.

[Rodrigo 5,424 Likes (Superhero)]

Hi @developerjames9 and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock! 🥳

 

You might want to have a look at this thread:

 

If you get stuck and have any GSAP related questions, let us know and remember to include a minimal demo.

Happy Tweening!

[developerjames9 0 Likes (Newbie)]

See the Pen yLxrrwM by developerjames9 (@developerjames9) on CodePen

 

I am having issues with the fourth section of my current website layout. It should be horizontally scrollable with an inner div containing vertically scrollable text. However, when you open my Codepen link and scroll down to the fourth section, you'll notice that the horizontal scroll is working fine. Still, the vertical scroll within the second column of the horizontal section is not functioning properly.
 

To provide more details, the fourth section is divided into 6x6 columns, with the first 6th column containing a fixed image and the second 6th column being the one that needs to be vertically scrollable. I need the vertical scroll within the horizontal section on the second 6th column to work seamlessly. Once the vertical scroll reaches the end, the second horizontal section should start scrolling, which is the same setup as the previous section. 

I am sending you the example which I want. open this reference link (https://water.falmec.com/en/) and got to the section "SINKS" and check the scroll horizontally with a vertical scroll in the same section,  I want the same functionality as that.

Please help me with this issue and tell me the solution or code. I am waiting for your response with a solution, and thank you in advance

[Cassie 5,408 Likes (Superhero)]

Hi there - you could use containerAnimation for this to trigger sub timelines, or you could use one big timeline. Personal choice really!

Here's some options, you'll have to tweak the timings to make it aligned with what you're after visually.

See the Pen poOmbYX?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Quote

Please help me with this issue and tell me the solution or code. I am waiting for your response with a solution, and thank you in advance

Just a little heads up that this forum isn't really for solutions, we'll do our best to help, but it's best for everyone if the goal is to help people learn rather than just crafting solutions for every use case!

 

In this case, here are some things that will help!

 

 

 

and for the timeline approach...

 

 

Hope this helps!

 

[developerjames9 0 Likes (Newbie)]

Thanks for helping me out. 

See the Pen yLxrrwM by developerjames9 (@developerjames9) on CodePen

I'm still experiencing an issue with the second column in the fourth section of my webpage where it continues to scroll despite the horizontal scroll in the fourth section working correctly. I have already added vertical scrolling to this column, but I need to know how to control it so that when I scroll horizontally through the fourth section, the first slide stops when it reaches the left side of the webpage. After this, the vertical scroll should be triggered either through mouse wheel scrolling.

 

 (https://water.falmec.com/en/)  Here is the example which I want the same. functionality check this website and go to the section "SINKS" and check the scroll horizontally with a vertical scroll in the same section,  I want the same functionality as that. 

 

[Rodrigo 5,424 Likes (Superhero)]

Hi,

 

The problem is the large scrub value you have in your ScrollTrigger instance:

const tl = gsap
  .timeline({
    defaults: {
      ease: "none"
    },
    scrollTrigger: {
      trigger: ".horizontal-container",
      pin: true,
      scrub: 10,
      end: "+=3000"
    }
  })

Basically you're telling ScrollTrigger that the animation's progress has to catch up with the scroll position in a span of 10 seconds (that's a lot!) and on top of that you have a large value for the ScrollSmoother config as well:

let smoother = ScrollSmoother.create({
  smooth: 5,   // seconds it takes to "catch up" to native scroll position
  effects: true // look for data-speed and data-lag attributes on elements and animate accordingly
});

So those values combined are creating the issue you're reporting, as it's taking the GSAP instance too long to catch up with the scroll position. Setting the scrub value to just true, seems to solve it:

let smoother = ScrollSmoother.create({
  smooth: 2.5, // seconds it takes to "catch up" to native scroll position
  effects: true // look for data-speed and data-lag attributes on elements and animate accordingly
});

let sections = gsap.utils.toArray(".page");
const stopPanel = sections.findIndex((section) => section.dataset.pin);
console.log(stopPanel);
const tl = gsap
  .timeline({
    defaults: {
      ease: "none"
    },
    scrollTrigger: {
      trigger: ".horizontal-container",
      pin: true,
      scrub: true,
      end: "+=3000"
    }
  })

Hopefully this helps.

Happy Tweening!

[developerjames9 0 Likes (Newbie)]

Thank you for your response, I have already tried this script but I am facing the same issue, I have placed your code in my script, But the issue remain same. Please suggest me or edit this code, Thanks.

Issue you can see below

See the Pen yLxrrwM by developerjames9 (@developerjames9) on CodePen

[Rodrigo 5,424 Likes (Superhero)]

Hi,

 

I'm not completely sure about what you want to do here. Maybe this is what you're after:

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

 

Hopefully this helps.

Happy Tweening!