kevchcm Posted November 2, 2020 Share Posted November 2, 2020 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 More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 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 More sharing options...
kevchcm Posted November 2, 2020 Author Share Posted November 2, 2020 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 More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 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 More sharing options...
kevchcm Posted November 2, 2020 Author Share Posted November 2, 2020 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 More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 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 1 1 Link to comment Share on other sites More sharing options...
kevchcm Posted November 2, 2020 Author Share Posted November 2, 2020 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 More sharing options...
ZachSaucier Posted November 2, 2020 Share Posted November 2, 2020 Please make a minimal demo of the issue if you'd like our help debugging It's hard to debug blindly. Link to comment Share on other sites More sharing options...
kevchcm Posted November 3, 2020 Author Share Posted November 3, 2020 @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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now