Jump to content
Search Community

Horizontal Scroll with Draggable, syncing the two.

17526_1494126625 test
Moderator Tag

Recommended Posts

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.

See the Pen YzNJvYB?editors=1011 by jdelatorre312 (@jdelatorre312) on CodePen

Link to comment
Share on other sites

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

 

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