Dynamic Vertical and Horizontal scrolling in page sections

[muzkore]

Hey all.

I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options.

What I am trying to achieve is having a page that has full width sections that are stacked on top of eachother.

When the user scrolls, it will scrub but will snap to the next vertical section which ideally would be variable height.

On a specific section(s), I would like to be able to add the ability to pin and slide sideways with scrub and snap as well.

It would be great if it enabled 'end' where it would unpin to be dynamic such as detecting the offsetwidth of the section.

I am 'guessing' that it could be done using gsap.utils.toArray for both the sections and sidescroll slides/subsections and I have tried to get it as far as I could but I know to the right person, it's probably pretty straight forward.

Any assistance or insight would be great. I'm excited by what I can see GSAP can do and hope to do a lot more so I can in turn help the community as well.

Thanks in advance.

Cheers

Murray

See the Pen KKaGbaE by muzKore (@muzKore) on CodePen

[GreenSock]

5 hours ago, muzkore said:

I'm trying to learn GSAP and am blown away (and a bit overwhelmed) by the immense amount of options.

Welcome aboard, Murray! I think you're gonna grow to love the tools more and more as you learn what you can do with them. 

 

I'd strongly recommend heading over to the ScrollTrigger demos page: https://greensock.com/st-demos/

 

It visually shows you a bunch of demos, and you can click to see the CodePens. 

 

Your demo looks similar to this: 

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

 

Does that help? 

 

5 hours ago, muzkore said:

I'm excited by what I can see GSAP can do and hope to do a lot more so I can in turn help the community as well.

Sounds great. Perhaps your story would unfold in a similar way as @PointC's did: 

We love it when the community helps each other around here. 

[muzkore]

Hey Jack

Thanks for the link. I had looked at the previously however I did pick up on a few new things that I did not see before which wa really useful.

This is good for doing the horizontal scroll and I like how it will even auto detect the number of side scrolls so to automatically generate the length.

I guess what I am going to try and do is see if there is a way to flip the coordinates to see if I can use this to scroll and snap on Vertical sections. The only issue is that there will be ones of various heights so it will make for an interesting challenge. Will report back anything that I find but if anyone has any ideas, I would be grateful.

Cheers

👍

[GreenSock]

11 hours ago, muzkore said:

I guess what I am going to try and do is see if there is a way to flip the coordinates to see if I can use this to scroll and snap on Vertical sections. The only issue is that there will be ones of various heights so it will make for an interesting challenge.

Sure, that should be pretty doable. You may even be able to use CSS snapping. 

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

 

By the way, your original drawing reminded me of this CodePen too: 

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

 

Good luck!

[muzkore]

Hey Jack. 

I tried the sideway but it went weird in my project so I think I may have to opt for a slider such as Slick Slider as I am being asked to make it so that the user can scroll past the sideway scrolling section (section two) and avoid the side scroll by scrolling faster than normal (##??##!!). That just sounds like bad UX and non intuitive to me so I am going to put my foot down about it.

As for the vertical, I also tried the CSS snap but it did not work. Saying all of that, it is in a WordPress site so there may be other issues at play.

Hopefully this will be my last question so I can let you get back to millions of other questions.

 

Scenario: I have a div with the ID of structure-content. In that div are section tags with each page section within. What I am wanting to know is how easy is it to have it so that when people scroll down the page, it snaps the section to the top of the page. Ideally, if it could be flexible to allow for more or less sections and I don't know if it is possible to allow the sections to different height although most are screen height. The CSS option looked like an awesome way to do it does not appear to be behaving (GRRR).

 

Even just a link to something that you believe will work or points to a solution would be fantastic and really appreciated.

 

Learning one step at a time.

 

 

[muzkore]

Hey Jack. 

Call it the n00b in me but I found what the issue was and thought to post it if it in turn could help someone else.

I managed to get the CSS scroll snapping working.

 

The reason why it did not work was that I had body { overflow-x: hidden; }  in my stylesheet.

 

I had it in a reset.scss file and as soon as I disabled that, the snapping worked. I almost exploded from joy!!. The great thing is that it is working with my GSAP code... so BRILLIANT!!!

Based on this found discovery and head slap oversight, I am thinking (and hoping) that I can combine the GSAP ScrollTrigger with CSS scroll-snap to do the sidway snapping in my original image above. If I get it to slide across 3 or more full width/width slides, set the ease to none and combine with CSS scroll-snap by having scroll-snap-type: x mandatory on the section and scroll-snap-align: start on the slides, I should get the desired result.

So many possibilities.

Thanks again. 

Code is art.

Cheers

Murray

 

[NoMore321]

@GreenSock Do you mind having a look at this fork of the pen you posted above, and checking why the 400vw section isn't repeating the effect as expected?

 

Hopefully just a silly thing I'm not understanding. Much appreciated!

See the Pen jOzRxjd by brynb (@brynb) on CodePen

[Cassie]

Heya!

 

Not a silly thing, this stumped me for a bit too.

So the end trigger is set as window.innerWidth * 3 - which is a specific number. So both end triggers are set at one specific point on the page.

You want the end triggers to be relative to the start point of the image. At different points down the page.

end: () => `+=${window.innerWidth * 3}`,

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

Hope that helps!

[NoMore321]

That did it! Thanks a million @Cassie!

[Berenice]

Hi Team,

 

I would like to implement a horizontal scroll snapping. Please, Any help? 

 

Best

[GSAP Helper]

@Berenice, if you'd like some help please open a new thread and make sure you include a minimal demo so we can understand the issue in context.

 

I'd encourage you to look into the "snap" feature in the ScrollTrigger docs. Are you using a containerAnimation? 

 

For the minimal demo, 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.

[thenelson]

Can anyone convert this to React?

[thenelson]

This is what I currently have, but when the section gets to the top of the screen, instead of scrolling horizontally, it goes blank. I really don’t know what i'm doing wrong

import React, { useEffect, useRef } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const Massive = () => {
  const massiveImageRef = useRef(null);

  useEffect(() => {
    gsap.set(massiveImageRef.current, {
      backgroundImage: `url(https://source.unsplash.com/random/${
        window.innerWidth * 3
      }x${window.innerHeight})`,
    });

    gsap.to(massiveImageRef.current, {
      xPercent: -100,
      x: () => window.innerWidth,
      ease: 'none',
      scrollTrigger: {
        trigger: massiveImageRef.current,
        start: 'top top',
        end: () => window.innerWidth * 3,
        scrub: true,
        pin: true,
        invalidateOnRefresh: true,
        anticipatePin: 1,
      },
    });
  }, []);

  return (
    <div>
      <h1 className="header-section">
        Scroll down to see a horizontal scroll section
      </h1>

      <div className="massiveImage" ref={massiveImageRef}>
        {Array.from({ length: 5 }, (_, index) => (
          <div key={index}>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
            commodo ligula eget dolor. Aenean massa. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
            Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
            aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
            imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
            mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
            semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
            porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
            ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra
            nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.
            Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies
            nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eg
          </div>
        ))}
      </div>

      <h1 className="header-section">Now were back to regular scrolling</h1>
    </div>
  );
};

export default Massive;

 

[GSAP Helper]

Hi @thenelson and welcome to the GreenSock forums!

 

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 Stackblitz that demonstrates 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 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

 

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. 

 

Finally take a look at the resources in this page: