Jump to content
Search Community

Recommended Posts

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

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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. 

 

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...