[Horizontal Scroll with Draggable, disabling and enabling animations on click]

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?

See the Pen YzNJvYB by jdelatorre312 (@jdelatorre312) on CodePen

[Horizontal Scroll with Draggable, syncing the two.]

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

[Horizontal Scroll with Draggable, syncing the two.]

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

 

[Scrolltrigger Horizontal Scroll with Parallax Background Image]

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

[Horizontal Scroll with Draggable, syncing the two.]

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

[Scrolltrigger Horizontal Scroll with Parallax Background Image]

 

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.

[Scrolltrigger Horizontal Scroll with Parallax Background Image]

7 hours ago, GreenSock said:

I think it's because you've got it set to "cover" and then you're trying to use percentages which will always match up anyway. Here's an excerpt from MDN docs: 

So maybe you'd want to switch to px or something. 

 

I'd personally avoid background-image animation because from my understanding, it's not accelerated and some browsers apply pixel snapping which means it can look jerky. Instead, I'd put an actual image behind there and use transforms to move it around. But that's just me

 

Are you saying that when you scroll down on a tablet, it doesn't work? Or are you saying that you want to also allow horizontal swiping? If so, that could be done using Draggable. 

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

[Scrolltrigger Horizontal Scroll with Parallax Background Image]

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.

See the Pen YzNJvYB by jdelatorre312 (@jdelatorre312) on CodePen