Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
muzkore

Dynamic Vertical and Horizontal scrolling in page sections

Go to solution Solved by GreenSock,

Recommended Posts

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

visual.png

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

Link to post
Share on other sites
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. 

  • Like 1
Link to post
Share on other sites

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

👍

Link to post
Share on other sites
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!

Link to post
Share on other sites

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.

 

:)

 

structure-content.png

Link to post
Share on other sites

Are you saying that simple CSS scroll snapping doesn't work for you? Here's a demo (without any ScrollTrigger stuff):

See the Pen 5153511977f9b1238d1f921ca7659eea by GreenSock (@GreenSock) on CodePen

 

Maybe this article would help: https://css-tricks.com/practical-css-scroll-snapping/

 

And for the record, ScrollTrigger works great in combination with native CSS scroll snapping.

 

2 hours ago, muzkore said:

I tried the sideway but it went weird in my project

Hm, that sounds strange. Feel free to post a minimal demo for us to peek at. Should work fine even in WordPress. 

 

2 hours ago, muzkore said:

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 (##??##!!).

I didn't quite follow that - are you saying that you want the pinning and side-scrolling to just totally not work if the user scrolls quickly?

 

2 hours ago, muzkore said:

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

Don't worry about it - we're happy to help people, especially polite ones asking GSAP-specific questions :)

Link to post
Share on other sites

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

 

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×