Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
17526_1494126625

Horizontal Scroll with Draggable, syncing the two.

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 post
Share on other sites

Great demo, Blake!

 

 

  • Like 1
Link to post
Share on other sites

 

As mentioned in that other thread, there is also a demo in the ScrollTrigger How-to-Pens collection on codepen that shows the use of a proxy element on a draggable fake-horizontal scroll powered by ScrollTrigger.

 

 

See the Pen ZELQqeJ by GreenSock (@GreenSock) on CodePen

 

  • Like 3
Link to post
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 post
Share on other sites

 

Actually since the draggable updates the ScrollPosition of the page you shouldn't have to do anything but add a ScrollTrigger with an animation for your background - I only added one for a fixed box here and made no changes to the draggable at all.

 

See the Pen a6415fd29e214942e248329e27072415 by akapowl (@akapowl) on CodePen

  • Like 2
Link to post
Share on other sites

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

  • Like 1
Link to post
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.

×