Immediate Snapping

[Brandemic]

Hey everyone, I'm new to GSAP and trying to learn. I've hit a roadblock. 
 

I'm trying to make something scroll immediately after it's pinned, but it's not behaving as I want. When it gets pinned, I need it to jump to 25% right away, and then jump again to the next 25% each time I scroll. Even though I tried adding snap, it's not happening instantly. I don't want it to stop scrolling at any point except every 25%.

Something like this but I want it in GSAP: 

See the Pen YzgmeGY by Fahad-Aameer (@Fahad-Aameer) on CodePen.

See the Pen xxBvYGE by Fahad-Aameer (@Fahad-Aameer) on CodePen.

[mvaneijgen]

Hi @Brandemic welcome to the forum and thanks for being a club member!

 

ScrollTrigger is build to hook animations to the scroll bar position, but you're looking for a tool that watches for a scroll event and then does some logic based on that, have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ that does exactly what you're describing 

 

Check out this demo from the docs, you can scroll as much as you want, but it only navigates to the next 'slide' when the current slide has done animating, this would be the basis on which I would build the animation you're looking for. Hope it helps and happy tweening!  

 

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen.

 

And here an example that mixes normal scroll with the Observer plugin

 

See the Pen oNQPLqJ by GreenSock (@GreenSock) on CodePen.

[Rodrigo]

Hi @Brandemic,

 

In this thread Jack explains why the snapping is not immediately and why that can't be achieved just with ScrollTrigger:

 

Finally maybe this demo  can help a bit:

See the Pen NWxNEwY by GreenSock (@GreenSock) on CodePen.

 

Happy Tweening!

[Brandemic]

6 hours ago, mvaneijgen said:

Hi @Brandemic welcome to the forum and thanks for being a club member!

 

ScrollTrigger is build to hook animations to the scroll bar position, but you're looking for a tool that watches for a scroll event and then does some logic based on that, have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ that does exactly what you're describing 

 

Check out this demo from the docs, you can scroll as much as you want, but it only navigates to the next 'slide' when the current slide has done animating, this would be the basis on which I would build the animation you're looking for. Hope it helps and happy tweening!  

 

 

 

 

And here an example that mixes normal scroll with the Observer plugin

 

 

 

Thanks for the reply, I tried to replicate the example in my code, I tried to understand the code and follow it through but it is not working as expected. when I inspected, it is not getting disabled when the section gets unpinned, also, the main scroller still scrolls. The observer docs is so confusing. Actually it never gets unpinned, it's stuck on pin

See the Pen xxBvYGE by Fahad-Aameer (@Fahad-Aameer) on CodePen.

[Brandemic]

Don't know why, my codepen link is not showing

 

See the Pen KKEObGr by mvaneijgen (@mvaneijgen) on CodePen.

[Rodrigo]

Hi,

 

The issue here is related to the start point of your ScrollTrigger instance as shown in the image:

That is without scrolling yet. As you can see the start point has already been passed.

 

This can be solved with ScrollTrigger's clamp feature:

 

ScrollTrigger.create({
  trigger: ".dotme-widgets-container",
  pin: true,
  start: "clamp(top 20%)",
  ...
});

Here is a fork of your demo:

See the Pen eYoYmzr by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps.

Happy Tweening!

[Brandemic]

Actually I had Lenis applied in my project, it didn't work well with the observer. I removed Lenis and now it's working fine.

[etxwebdev]

 

On 2/26/2024 at 2:40 PM, mvaneijgen said:

....

And here an example that mixes normal scroll with the Observer plugin

 

 

 

 

Hello @mvaneijgen

 

Thanks for this beautifully working example for combining normal scrolling content before and after the snapping/slide section on desktop. Unfortunately, this doesn't work on mobile, because swiping to the next panel on touch devices you "swipe up" to go down. How can I adjust the function "gotoPanel" to make it work properly on mobile?

 

I tried to adjust the onUp() and onDown() functions without success. I tried to adjust the gotoPanel function to work reversely also without succes like so:

if ("ontouchstart" in window ||
  navigator.maxTouchPoints > 0 ||
  navigator.msMaxTouchPoints > 0) {

  if (isScrollingDown) {
    isScrollingDown = false;
    index = currentIndex - 1;
  } else {
    isScrollingDown = true;
    index = currentIndex + 1;
  }
}

Any help will be appreciated, thanks.

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

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

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

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

[etxwebdev]

UPDATE FOR FUTURE READERS: I just got it to work on mobile too. Yay!

 

This is the code to detect the swipe up / down on mobile devices:

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var swipeUp
var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches || // browser API
    evt.originalEvent.touches; // jQuery
}

function handleTouchStart(evt) {
  const firstTouch = getTouches(evt)[0];
  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
};

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) < Math.abs(yDiff)) {
    if (yDiff > 0) {
      swipeUp = false;
    } else {
      swipeUp = true;
    }
  }
  /* reset values */
  xDown = null;
  yDown = null;
};

And at the beginning of the gotoPanel-Function I simply checked if it's a touch device an changed the behaviour to the opposite:

 

if ("ontouchstart" in window ||
    navigator.maxTouchPoints > 0 ||
    navigator.msMaxTouchPoints > 0) {

  if (swipeUp) {
    index = currentIndex - 1;
    isScrollingDown = false;
  } else {
    index = currentIndex + 1;
    isScrollingDown = true;
  }
}

Regard, Loris