kevchcm

Paul, thank you so much for your answer, it's exactly what I needed and sorry for my ignorance, but how can I achieve the same thing when the user scroll past the test, so now will go from blue to white This is the udpated code https://codepen.io/godhandkiller/pen/zYKrqbY

Hello, I'm working with scrolltrigger and I'm trying to create a background color from white to blue when the users scrolls. The problem is that I want that transition to be very smooth but the results I have it's that the blue color appears once the trigger starts. This website show an example of what I am trying to do https://demosnappy.webflow.io/product Here is a video as well Screen Recording 2020-12-03 at 9.16.57.mov

@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

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?

Ok, so i did this simplified codepen of what I have on my code https://codepen.io/godhandkiller/pen/rNLvEvO?editors=1010 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

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.

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) } });

Hey thank you for the suggestion, unfortunately that plugin didn't work, but I'll try to make it work with javascript. I have another question regarding my horizontal scroll site https://dev-shapetx.pantheonsite.io/therapeutics-platform/ Is there a way to know when a section is visible on the viewport. I have to add some animations to the text when a section shows up

I used this example for a website and I't works great but I have a problem, my client want this to work with a trackpad, so like if you're in a macbook you can swipe to the sides instead of up/down, it's there a way to do this? Here is my website https://dev-shapetx.pantheonsite.io/therapeutics-platform/