Looping image gallery horizontally but having problems animating the progress

[Moritz L]

Hi there! I am fairly new to GSAP, but already dug deep into the forums. That's where I found the helper function for horizontally looping a slider. Works like a charm.

Here I am using the helper function:

let sliderItems = document.querySelectorAll('.js-slider-item')

 

const images = gsap.utils.toArray(sliderItems)

const loop = horizontalLoop(images, {

repeat: -1,

paddingRight: '24px',

paused: true

})

Then, within the Observer, I am animating the progress of the horizontalLoop timeline like so:

const mapRange = gsap.utils.mapRange(0, window.innerWidth, 0, 1)

 

Observer.create({

target: '.js-wrapper',

type: 'pointer,touch,wheel',

wheelSpeed: -0.2,

onChange: (self) => {

const delta = Math.abs(self.deltaX) > Math.abs(self.deltaY) ? -self.deltaX : -self.deltaY

const scrub = gsap.to(loop, {

progress: loop.progress() + mapRange(delta) * 5,

duration: 1,

ease: 'power4.out'

})

 

scrub.invalidate().restart()

}

})

 

But here is my problem that I can't wrap my head around: When I first scroll to the left (positive direction on the timeline) and then backwards, the loop works as expected. But when my first drag or scroll is to the right (negative direction of the timeline – so the progress value would be negative), there is no movement at all. Until I scroll just a tiny bit to the left and then backwards.... 

I can't find any solution online, hoping that someone here is smarter than me.

 

Thanks so much!

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Moritz L]

I've done my best to strip out everything that's unnecessary:

 

See the Pen mdzLOKL by moritzlaube (@moritzlaube) on CodePen

 

Dragging to left, then to right works (same for scrolling). But if you hit rerun and then try to scroll to right first, it's not working.

[Rodrigo]

Hi @Moritz L and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock!

 

The problem here is that on the first scroll up, the value you're passing to the progress property is negative, but only the first time it doesn't work. On successive events scrolling up a negative value works as expected.

 

What you can do is create some simple conditional logic that runs on that first event in order to check if the value is negative and use GSAP Wrap Util function to pass it correctly:

onChange: (self) => {
  const delta =
        Math.abs(self.deltaX) > Math.abs(self.deltaY)
  ? -self.deltaX
  : -self.deltaY;
  let myProgress = snapProgress(loop.progress() + mapRange(delta) * 10);
  if (!hasChanged && myProgress < 0) {
    myProgress = gsap.utils.wrap(0, 1, myProgress);
  }
  hasChanged = true;
  const scrub = gsap.to(loop, {
    progress: myProgress,
    duration: 1,
    ease: "power4.out"
  });
  scrub.invalidate().restart();
}

That conditional check will be truthy only on the first event, then it'll always be falsy. Here is a fork of your codepen:

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

 

Hopefully this helps.

Happy Tweening! 

[Moritz L]

@Rodrigo Thanks so much for your help! Your solution on CodePen did not work and I tried the wrap helper function before. But your explanation has led me to the solution: After setting up the loop timeline, I am instantly jumping to the end of the timeline like so: 
 

const loop = horizontalLoop(images, {
	repeat: -1,
	paddingRight: '24px',
	centerAlign: true,
	paused: true
})

loop.progress(1)

This solves my problem, because then I can also have negative progress values. I still can't quite wrap my head around it because at a certain point when constantly scrolling to the right (in a negative timeline direction) the progress will go past 0 and become negative at a certain point, right? 

But nevertheless, it works. Here is the updated Pen: 

See the Pen mdzLOKL by moritzlaube (@moritzlaube) on CodePen

Thanks again for your help! It's awesome to be part of this community.