Scroll snap stop - Restricting scroll snap to one section per scroll

[ddboy19912]

https://stackblitz.com/edit/stackblitz-starters-ougpwp?file=src%2FApp.tsx
Hey guys, I have a scroll snap with gsap here but the problem is if the user scrolls hard enough he can move from the first section to the last one. I want to prevent this and have a similar UX as here :
https://codesandbox.io/s/competent-fire-fy3rmk?file=/src/styles.css:172-296
Please how can I achieve this with gsap

[mvaneijgen]

Hi @ddboy19912

 

Sound like you are looking for the Observer plugin https://greensock.com/docs/v3/Plugins/Observer 

 

Check out this demo 

 

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

[ddboy19912]

When I read that documentation it says there is no actual scrolling, It looks more like a parallax effect. In my case there is scrollling from one section to the other I just want to restrict the snap scroll to the next section, similar to the Observer code example but the implementation is different.

[Cassie]

Quote

it says there is no actual scrolling, It looks more like a parallax effect.

 

These are two different things

 

1) The functionality - You're correct that there is no actual scrolling in that demo - it's listening to scroll events. When has the user tried to scroll.

 

2) What it looks like - "It looks more like a parallax effect" - This isn't quite right. There's no inherent "look" to using Observer. Observer just listens to events. You can make it look like whatever you feel like. You're just firing animations off based on events. You could fire off a rainbow confetti cloud, or change the background colour or add a class or create a parallax effect. It's up to you.

 

That demo you linked to is using scroll events - there is no actual browser scroll happening! 

 

[ddboy19912]

Url:
https://stackblitz-starters-ougpwp.stackblitz.io 
Code: React Starter (forked) - StackBlitz
I'm trying to use the observer methods' onDown/onUp function and passing in a function that handles scrollToView method to each section. It works fine when I add the function to a button, it just snaps well to the desired section but when I add the function to the onDown property it gets very buggy and does not transition well.
I logged out values in the function when called by the onDown property and I see a continuous render of the log results. 
Ref:
 

import { useState, useRef, useLayoutEffect } from 'react';
import React = require('react');
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import './style.css';
import Footer from './Footer';

gsap.registerPlugin(ScrollTrigger);

export default function App() {
  const tl = useRef();
  const scope = useRef(null);

  const [showFooter, setShowFooter] = useState(false);

  const handleClickScroll = () => {
    const element = document.querySelector('.panel-2');
    if (element) {
      // 👇 Will scroll smoothly to the top of the next section
      element.scrollIntoView({ behavior: 'smooth' });
      console.log('worked');
    }
  };

  useLayoutEffect(() => {
    const ctx = gsap.context((self) => {}, scope);

    ScrollTrigger.observe({
      target: '.container',
      onDown: () => handleClickScroll(),
    });

    return () => ctx.revert();
  }, []);

  return (
    <div className="container">
      {/* {showFooter && <Footer setShowFooter={setShowFooter} />} */}
      <section className="panel panel-1">
        <button onClick={handleClickScroll}>Scrollerrrrrrrrrr</button>
        <h1>GSAP and CSS Scroll Snapping</h1>
      </section>

      <section className="panel panel-2">
        <p>Section 2</p>
      </section>

      <section className="panel panel-3">
        <p>Section 3</p>
        <p>next slide should reveal footer modal</p>
      </section>
    </div>
  );
}

 

[Rodrigo]

Hi,

 

Maybe this example can nudge you in the right direction:

https://stackblitz.com/edit/vitejs-vite-d73sck?file=src%2Fviews%2FLayers.jsx

 

Go to the Layers Section link in order to see how it works. Is basically a React port of this example:

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

 

Hopefully this helps.

Happy Tweening!