How can I use scroll trigger snap to only to a section and not out of it?

[peschaefer]

I am making a react website that has a video element that is snapped to when it comes into frame.  When it is snapped to, it takes up the full screen as expected.  However, when the user scrolls back up, it snaps to the top of the element.  Is there a way I can make it only snap to the element and not out of it? I would like the user to be able to freely scroll up without it being scroll jacked, and only have it snap when the user is scrolling down.  Here is my code:

 

import React, { useRef, useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import Backpack from "./Kipling Seoul Backpack - Stop Motion (2).mp4"

gsap.registerPlugin(ScrollTrigger);

const VideoSection: React.FC = () => {
    const videoRef = useRef<HTMLVideoElement>(null);
    const sectionRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const video = videoRef.current;
        const section = sectionRef.current;

        gsap.to(section, {
            scrollTrigger: {
                trigger: section,
                start: "top center",
                end: "center center",
                snap: 1,
                markers: true,
                onEnter: () => {
                    // @ts-ignore
                    video.play();
                },
                onLeaveBack: () => {
                    // @ts-ignore
                    video.currentTime = 0;
                    // @ts-ignore
                    video.pause();
                },
            },
        });
    }, []);

    return (
        <div className="video-section" ref={sectionRef}>
            <video
                ref={videoRef}
                src={Backpack}
                muted
                loop
                preload="auto"
            ></video>
        </div>
    );
};

export default VideoSection;

 

[GSAP Helper]

You could probably use GSAP's ScrollTo Plugin onEnter to achieve your desired effect...

 

Or, this may be helpful: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.snapDirectional()

That said:

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. 

[peschaefer]

Here is a StackBlitz showing my issue: 

https://react-5ax6wp.stackblitz.io

[Rodrigo]

Hi @peschaefer and welcome to the GreenSock forums!

 

You're looking for the direction option in ScrollTrigger. All you have to do is run your own custom logic in the snap config using a function and based on the direction return 1 or just don't return anything.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/direction

 

Also I recommend you to check these resources in order to know about GSAP Context and how it makes using GSAP on React super simple:

 

Here you can see a fork of your example (thanks for the super simple demo, we love those 💚)

https://stackblitz.com/edit/react-of3jxk?file=src%2FSnappingVideo.jsx

 

Hopefully this helps.

Happy Tweening!