Jump to content
Search Community

Unpin scrollTrigger when reaching the last section

purple-lightsaber test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

I assume you wanted something like this?: 

See the Pen oNdNLxL?editors=1010 by GreenSock (@GreenSock) on CodePen

 

You could also handle things like this so that the scrollbar isn't frozen: 

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

 

By the way, you can simplify this: 

let reversedPanels = [...swipePanels];
reversedPanels.forEach((panel, index) => {
  gsap.set(panel, { zIndex: index });
});

To this:

gsap.set(swipePanels, {
  zIndex: i => i
})

I hope that helps!

  • Like 1
Link to comment
Share on other sites

Thanks for the response! I'm actually looking for the .swipe-section to "un-pin" once it gets to the orange section in order for the actual .panel > .orange to be scrolled vertically instead of having a separate section that is not nested in the .swipe-section.

 

I think the pseudo logic would be: Orange panel OnEnter { if( scrolledDown){unpin the .swipe-section}  }

and then scrolling back to the top of the orange section would have logic to pin the .swipe-section again so that the panels can go back to the horizontal swipe animations.

 

 

Link to comment
Share on other sites

I read your post a few times and...sorry, I'm lost. As far as I can tell, the demo I provided does exactly that - once the orange section is fully in the screen (horizontally), it activates the vertical scrolling, and inverts that in the reverse direction too. 🤷‍♂️

I think I've given you all the tools you'd need to resolve this. If you still need help, please post a minimal demo that very clearly illustrates the issue and make your GSAP-specific question as clear as you can. Keep in mind that these forums aren't really intended to be "we'll provide free custom consulting services to make your project work just the way you want", but we're happy to answer GSAP-specific questions (like about the API). 

Link to comment
Share on other sites

Isn't that logically impossible unless you make each section just a container with its own scrollbar? If you've got a bunch of sections side-by-side, right? So let's say they have their tops lined up - if you "scroll" the entire page, of course that affects all the other sections since they're on the page. See what I mean? At the "bottom" of that scroll, if you then move things horizontally, the other sections would now also be scrolled down. But of course if you have each section have its own scrollbar, that's fine. 

 

You could shift things all around during scroll I suppose, so that if the first section is scrolling the entire page down, you could use GSAP to also animate the "y" of  the other sections to keep it even, but I'm really not sure what you're looking to do or how you want to handle the logic of all this stuff. 

 

We love helping with GSAP-specific questions (like about the API), but these forums aren't really for providing free general consulting services for logic challenges, building out effects for you, etc. But we're totally willing to jump in with any GSAP knowledge you need. 👍

Link to comment
Share on other sites

  • Solution
48 minutes ago, purple-lightsaber said:

I'm actually looking to have each container with its own vertical scroll. Is it logically possible to do this? 

I'm not sure what you're asking - I just explained it all in my previous post...right? I meant that each container would literally have its own scrollbar. So you're no longer scrolling the web page itself. But it may look a bit odd to have a scrollbar on the side of each, especially as you're scrolling horizontally and see them moving across the screen. 

 

50 minutes ago, purple-lightsaber said:

Would I need pin logic like this? 

I don't know what you're asking. If you need help with something, please make sure you provide a minimal demo and a very specific GSAP-related question and we'd be happy to do our best to answer. 

Link to comment
Share on other sites

2 hours ago, GreenSock said:

each section just a container with its own scrollbar

I'm wondering what kind of logic I'd need to use in order to turn a section into a vertical scroll after clicking a button. Wouldn't I need to unpin the horizontal swipe section? I'm just not sure what to use in order to go from horizontal to vertical. I'm ok with having scrollbars on each axis.

Link to comment
Share on other sites

26 minutes ago, purple-lightsaber said:

I'm wondering what kind of logic I'd need to use in order to turn a section into a vertical scroll after clicking a button. Wouldn't I need to unpin the horizontal swipe section?

I don't have time to do a deep-dive into the various strategies you could use, but I'd imagine you don't need pinning at all. You just use Observer and respond to the events in whatever way you want - if you want to do vertical, then maybe don't call preventDefault() on the wheel event so that it does the scrolling as normal. Otherwise, move things horizontally via JS. 

Link to comment
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.
×
×
  • Create New...