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];