17526_1494126625

Hey guys, I have this horizontal scroll project I'm working through and I'm at the point where everything is working well, but, for open modals, we want to disable the scrolltrigger, and when the modal is closed, I want it to resume scrolling. I found another article about this using Scrolltrigger.disable(false) and Scrolltrigger.enable(false), but I'm noticing sometimes when closing the modals, the animation restarts all over again to the first slide. Am I missing something here?

That worked, I was adding the pin to the background which broke my code. Thank you!

Hey, thank you very much, it's working great, but i'm having an issue. On scroll, i'm moving the image that stands as the background AND i'm moving the divs horizontally across the screen to give the horizontal scroll effect. I'm able to code it with the proxy but i'm having difficulty changing both scroll triggers. Do I need two instances of draggable? var sections = document.querySelectorAll("article"); var scrollContainer = document.querySelector("#panels-container"); var scrollBackground = document.querySelector(".backgroundimage"); var scrollTween = gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none" }); var scrollTweenBg = gsap.to(".backgroundimage", { left: "-5000", ease: "none" }); var horizontalScroll = ScrollTrigger.create({ animation: scrollTween, trigger: scrollContainer, pin: true, scrub: 1, end: function(){ return "+=" + scrollContainer.offsetWidth}, }); var horizontalBgScroll = ScrollTrigger.create({ animation: scrollTweenBg, trigger: scrollContainer, pin: true, scrub: 1, end: function(){ return "+=" + scrollContainer.offsetWidth}, }); // total scroll amount divided by the total distance that the sections move gives us the ratio we can apply to the pointer movement so that it fits. var dragRatio = scrollContainer.offsetWidth / (window.innerWidth * (sections.length - 1)); var dragRatioBg = scrollContainer.offsetWidth / (window.innerWidth * (1)); var drag = Draggable.create(".proxy", { trigger: scrollContainer, type: "x", onPress() { console.log(this) this.startScroll = horizontalScroll.scroll(); // this.startScroll2 = horizontalBgScroll.scroll(); }, onDrag() { horizontalScroll.scroll(this.startScroll - (this.x - this.startX) * dragRatio); // horizontalBgScroll.scroll(this.startScroll - (this.x - this.startX) * dragRatio); } })[0];

Hi is there a simple example on how to setup a proxy?

Hi, so I'm using a fake horizontal scroll on my project. Everything is working great, but for tablet, I added draggable to allow for swiping. The issue is, when users swipe with draggable, and then click on a nav item, the offset is taking them to the correct part of the page. I'm using offset calculations to scroll to the correct section. And in connection to this issue, users are dragging past the last div because I'm assuming the scrolltrigger is not registering that the user is past the last div. Any help would be greatly appreciated.

https://codepen.io/jdelatorre312/pen/YzNJvYB OK, thank you for your help. I have everything working, but when the user drags the screen, it doesn't update the scrolltrigger offset and people are dragging/swiping past the last div. If I scroll all the way through it stops on the last div as it should.

Hey thanks for the response. Are you recommending having the image behind everything and transforming it with css? Inline?

Hey guys, I was wondering if someone could give me some assistance on this project I'm working on. The project is a horizontal scrolling page with 6 panels. Each panel will have different content (images and text). When the user scrolls with their mouse, I would like the panels look like they're scrolling horizontally, BUT the background image of the wrapper needs to change background position throughout. I have the first part working well(horizontal scrolling panel), but the scrolltriggered background image of the wrapper is not functioning correctly. Any help would be appreciated. One last thing, if someone can tell me how to keep this same effect while tablet swiping, I would really appreciate it. Thanks.