How to make observer not infinitely loop through sections?

[FrEZ]

When the final camera position is reached, it loops back to the start, rather call another function with different gsap properties. How can I make it call another function and not loop back?

let wrap = gsap.utils.wrap(1, 6);

gsap.registerPlugin(Observer, CSSRulePlugin);
let animating = false;
function scroll(index) {
	index = wrap(index);
	currentIndex = index;
	animating = true;
	let tl = gsap.timeline({
	onComplete: () => animating = false});
	tl.to(camera.position, {
		duration: 2,
		ease: "power3.easeInOut",
		...cameraPositions[index],
})

Observer.create({
	target: window,
	type: "wheel, scroll",
	onUp: () => !animating && scroll(currentIndex - 1), 
	onDown: () => !animating && scroll(currentIndex + 1),
	preventDefault: true
  });

 

[Rodrigo]

Hi,

 

Is really hard for us to know what could be the issue without a minimal demo.

 

The few things I can think of based on the code you posted is that since you're using the Wrap Utility, it'll keep returning a value that lands within the range you've passed to it. That's basically what it does. You might want to check if the current index is equal to the last index or zero in order to prevent the event handler from being called:

Observer.create({
  target: window,
  type: "wheel, scroll",
  onUp: () => currentIndex > 0 && !animating && scroll(currentIndex - 1), 
  // I'm using a magic number here (6) because you're using 6 in the wrap utility
  // But probably should be array.length - 1
  onDown: () => currentIndex < 6 && !animating && scroll(currentIndex + 1),
  preventDefault: true
});

Other than that I can think of any other reason without a live minimal demo.

 

Hopefully this helps.

 

Happy Tweening!