vertical snapping and horizontal scrolling panes

[bultano]

Hi all, 

 

I am trying to do the following:

-vertical scroll snapping  (achieved, see code below)

-when the user scrolls to section 2, lock section 2 in place so they cant scroll vertically anymore and scroll/wheel/touchmove and pointermove will instead move the yellow container negative x, towards the text and through the over side and scrolling the otherway will reverse it, this is so they can see all of the panes.

-When the animation is complete, allow scrolling vertically again.

 

Let me know if this is possible 

 

Thanks.

 

Here is the working code for the "scroll snapping":

 

gsap.registerPlugin(ScrollToPlugin, ScrollTrigger);

 

useEffect(() => {

 

  const sections = document.querySelectorAll("section");

 

  // this scrolling object just allows us to conveniently call scrolling.enable(), scrolling.disable(), and check if scrolling.enabled is true.

  // some browsers (like iOS Safari) handle scrolling on a separate thread and can cause things to get out of sync (jitter/jumpy), so when we're animating the scroll position, force an update of GSAP tweens when there's a scroll event in order to maintain synchronization)

  const scrolling = {

      enabled: true,

      events: "scroll,wheel,touchmove,pointermove".split(","),

      prevent: e => e.preventDefault(),

      disable() {

        if (scrolling.enabled) {

          scrolling.enabled = false;

          window.addEventListener("scroll", gsap.ticker.tick, {passive: true});

          scrolling.events.forEach((e, i) => (i ? document : window).addEventListener(e, scrolling.prevent, {passive: false}));

        }

      },

      enable() {

        if (!scrolling.enabled) {

          scrolling.enabled = true;

          window.removeEventListener("scroll", gsap.ticker.tick);

          scrolling.events.forEach((e, i) => (i ? document : window).removeEventListener(e, scrolling.prevent));

        }

      }

    };

 

 

  function goToSection(section, anim, i) {

    if (scrolling.enabled) { // skip if a scroll tween is in progress

      scrolling.disable();

      gsap.to(window, {

        scrollTo: {y: section, autoKill: false},

        onComplete: scrolling.enable,

        duration: 1

      });

 

      anim && anim.restart();

    }

  }

 

  sections.forEach((section, i) => {

 

   

    ScrollTrigger.create({

      trigger: section,

      start: "top bottom-=1",

      end: "bottom top+=1",

      onEnter: () => goToSection(section),

      onEnterBack: () => goToSection(section)

    });

   

  });

 

})

 

 

[GSAP Helper]

Howdy! I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should animate over each section, and gradient colors over those children, force animation on hero load and then have ScrollTrigger take over dynamically...and I think my code is a mess so please help clean it up" - that's too hard to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 😉

 

Before you know it, things will fall into place one at a time.

 

Again, try not to list out all the problems. Break them apart. You'll get a lot more people willing to help you if you keep things simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you. 

 

Also, it looks like you are not doing proper cleanup in React. gsap.context() is your new best friend in React. I would HIGHLY recommend reading this article:

 

 

Here's a React starter template that you can fork.

[Rodrigo]

Hi,

 

Indeed you're trying to do too much right of the bat. Start with one section and then move to the next.

 

Perhaps these examples could provide some inspiration:

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

 

See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen

 

Also read the GSAP & React guide and use GSAP Context in your React/Next apps.

 

Happy Tweening!

[bultano]

Hi all, 

 

Please see my codepen below, I have put the horizontal scrolling on hold whilst i try to get the scrollTo buttons working in line with the scroll snapping, they seem to clash so i have made a function which disables all scroll triggers, which works but then after the scrollTo animation has ran, i enable the ScrollTriggers again and it reverts to the previous state.

 

See the Pen VwGwOWY by jakeholcr (@jakeholcr) on CodePen

 

  const scrollToAnimation = (id) => {

    let triggers = ScrollTrigger.getAll();


    const disableTrigs = () => (
      triggers.forEach( trigger => {            
        trigger.disable(false);
      })
    )
    const enableTrigs = () => (
      triggers.forEach( trigger => {        
        trigger.enable(true);
      })
    )

    gsap.to(window, {
        duration: 2,
        scrollTo: {y: id},
        onStart: () => disableTrigs(),
        onComplete: () => enableTrigs()
    });

}

 

 

[bultano]

/

[Cassie]

Hey there Jake, this is quite a lot to request help with - may I suggest leaving React out for now and just trying to get a prototype working with vanilla JS. Then, once you've got the GSAP bit sorted, you can ✨Reactify✨ it. You'll have more chance of people jumping in to help if there are less complexities involved.

This demo linked in the thread seems to do pretty much what you're after though? Why don't you take a look at that, fork it and see if you can adjust it to fit your use case?

See the Pen 1ccf60146d680c09ba6074bf9132778d by GreenSock (@GreenSock) on CodePen

Right now the sections are layered on top of each other but you could position them relative and use the same logic to listen for a scroll event and then jump down the page.
 

[bultano]

    Array.from(navItems).forEach((navItem, i) => {
      navItem.addEventListener("click", () => {
        const section = sections[i];
        goToSection(section);
      });
    });

 

 This was my solution.

[bultano]

Hi all, 

 

I've got most of the functionality working, see below:

See the Pen YzOzoWV by jakeholcr (@jakeholcr) on CodePen

 

Scroll snapping is working and then when it gets to the second slide, it pauses the scrolling and then allows for horizontal scrolling and then lets you carry on but then im having issues when the users goes back up, it seems to break! it might be a simple fix

[bultano]

It looks like the pin is part of the issue

[GreenSock]

Hi @jakeholcr. I noticed a few things: 

• You're not doing proper cleanup in React. gsap.context() is your new best friend because it makes it easy. I strongly recommend reading this article:
• You seem to have logic problems in your code. For example, you're creating a ScrollTriggered animation that does pinning...and then in the onComplete you're killing that ScrollTrigger which of course would remove the pinning stuff, altering the whole DOM structure and collapsing things. In other words, pinning added a pin-spacer DIV that helps keep things propped open while pinning...and then you're killing the ScrollTrigger which then collapses things. See what I mean? 

I'd bet that whatever you're attempting to do is possible, but it's beyond the scope of help we can provide here for free in these forums. If you'd like to explore paid consulting opportunities, feel free to contact us. Or post in the Jobs & Freelance forum. We're happy to answer any GSAP-specific questions, like about the API, etc. It's just way more complex and time-consuming when the questions are about a list of requirements, custom logic, React, etc.

 

Here's a quick fork of your project where I started implementing gsap.context() in case it helps: 

See the Pen dyqoXmO?editors=0010 by GreenSock (@GreenSock) on CodePen

[bultano]

All im trying to do is exactly what is in the codpen (scroll snapping vertically, then horizontally scroll then back to vertical and then also when they scroll back up it works in reverse)i feel like im so close to completing this but just missing something simple, if i disabled the horizontal trigger instead and then enabled it on enterback, would this work?

[GreenSock]

Hi @bultano. We're happy to answer GSAP-specific questions here (like about the API), but you've ventured well into the custom consulting zone with all the custom logic you're trying to implement there. Like I said, we can certainly chat about our paid consulting services if you'd like to pursue that. Almost anything is possible with the tools...it's just a matter of figuring out all your requirements and then crafting the custom logic around those. 

 

Good luck with the project.