Jump to content
Search Community

Alert when section passes midpoint of screen on horizontal scroll

kevchcm test
Moderator Tag

Recommended Posts

Hey guys, I have a question regarding this plugin. I have a website that uses horizontal scroll, the main div has children sections and the sections have their content.

Now a I have a separate navigation menu on top and what I need to do is to show which section you're in, so I need to track when a section has pass the middle of the screen so I can highlight the navigation menu. It's there a way to do this with this plugin.

I don't have a codeped but here is the link to my website https://dev-shapetx.pantheonsite.io/

 

This is the code that I use to initiate the plugin

 

this.scroll = gsap.to(this.container, {
  x: () => -( (this.container.scrollWidth - document.documentElement.clientWidth) ) + "px",
  ease: "none",
  scrollTrigger: {
    trigger: this.container,
    invalidateOnRefresh: true,
    pin: true,
    scrub: 0.2,
    end: () => "+=" + (this.container.scrollWidth - document.documentElement.clientWidth)
  }
});

 

Link to comment
Share on other sites

Hey kevchcm. Since you're really faking horizontal scrolling using ScrollTrigger, you'll need to calculate when a section comes into view and fire the function that you need at that point. Are all of your horizontal sections the same width? That'd make things easier.

 

If you would like coding help, please make a minimal demo using CodePen.

Link to comment
Share on other sites

Unfortunately sections can have different width and not all of the sections have a "menu item" on the navbar, so I need to identify the ones that have (I can filter them with a class). Let me try and do a codepen and I'll posted.

 

I've been trying to follow the example you share on here 

 

But I haven't had success, since on this once you work with the content inside a section instead of the sectiontion itself plus I don't know how to put a function to know when the section its on the viewport.

 

Link to comment
Share on other sites

10 minutes ago, kevchcm said:

I don't know how to put a function to know when the section its on the viewport.

You'll need to loop through all of your elements in the horizontal section. If they have a corresponding element in the animation, you setup an animation and ScrollTrigger as necessary. The demo in the thread that you link to shows how to calculate the scroll position of each element (the vertical offset of the container plus the horizontal offset of each section). Use ScrollTrigger's callbacks to fire off your function.

Link to comment
Share on other sites

12 minutes ago, ZachSaucier said:

You'll need to loop through all of your elements in the horizontal section. If they have a corresponding element in the animation, you setup an animation and ScrollTrigger as necessary. The demo in the thread that you link to shows how to calculate the scroll position of each element (the vertical offset of the container plus the horizontal offset of each section). Use ScrollTrigger's callbacks to fire off your function.

Ok, so i did this simplified codepen of what I have on my code

See the Pen rNLvEvO?editors=1010 by godhandkiller (@godhandkiller) on CodePen

 

I added the markers so I can see what's happening. This first issue that I have is I have no idea how to move the "scroller-start" mark position, since I needed it more on like half the screen. Also I don't know what callback to use, I tried to use "onEnter" but it only fires once

Link to comment
Share on other sites

It doesn't look like you attempted to use the solution from the other thread that you linked to above. Or perhaps you didn't save? 

 

Anyway, here's something to get you started. This will fire a console.log() when each section reaches the leftmost part of the viewport:

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

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

1 hour ago, ZachSaucier said:

It doesn't look like you attempted to use the solution from the other thread that you linked to above. Or perhaps you didn't save? 

 

Anyway, here's something to get you started. This will fire a console.log() when each section reaches the leftmost part of the viewport:

 

 

Thank you Zach, I'm sorry if I'm giving you a hard time, I'm really struggling to understand the concepts on your plugin. 

I was checking out the code and I just another question if you can help me out with this. 

I have a sidebar menu on my website, so basically, and following your example, there is going to be a 230px left padding on the main container, so I have to take that into account when I'm checking if a section has enter or not.

 

I was moving the values of the "start" property on the sections scrollTrigger, basically I'm adding the 230 to the section.offsetLeft but somehow that makes all of the sections to trigger at the same time. Any idea how can I make this work?

Link to comment
Share on other sites

@ZachSaucier So sorry my bad. I was going to make to the codepen but then I started working on my code and I think I made it work! I wish I could show you a codepen but it would take me forever to do it with the actual functionality of my project but I want to show you the snippet of the code I ended up using 

 

filteredSections.each((i, section) => {
  let sectionId = $(section).attr('id');
  let offset = this.originalOffsets[sectionId] - 440;
  if(offset < 0) offset = 0;

  let filteredMenuItems = this.menuItems.filter(function(i){
    return $(this).attr('data-section') == sectionId;
  });

  ScrollTrigger.create({
    start: offset,
    end: `+=${section.offsetWidth}`,
    onEnter: () => {
      this.addActiveStateNavigation(filteredMenuItems)
    },
    onEnterBack: () => {
      this.addActiveStateNavigation(filteredMenuItems);
    },
  });
});

Basically on the end property you added a section.offsetLeft  so I just subtract the amount I needed so the scrollTrigger starts at a certain position on screen.

For the moment this is working fine I just need to fix some bugs on my part, If I have any other issues I would let you know (with an example this time!)

 

Thank you so much for your help

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...