Disable scroll when entered pinned section

[CodeTest]

Hi 

 

Please can I get some help! Once we scroll past the purple intro section we want to lock into the horizontal scroll section... so no scrolling back up to the intro section. I'm struggling to find a solution for this. 

Also the ScrollSmoother is causing an issue where when you've dragged the horizontal slider to the end slide, it suddenly scrolls down to empty space. I'm hoping the solution of locking just on the slider will sort this issue? 

See the Pen QWoawPO by Code-Test24 (@Code-Test24) on CodePen

[GreenSock]

Are you saying you literally want to force the user not to be able to scroll back up to the intro? So they'd see the scrollbar, and if they drag it up, you want the browser to just refuse? That sounds super frustrating for users. Or are you saying that once you scroll past the intro, it gets removed from the DOM so that suddenly the scrollbar would jump to adjust to the new height? Sorry, I'm just not quite sure what you're asking here. 

 

As for the empty space, that's just because in your onDrag, you're setting the scroll to more than the maximum possible scroll position, so you can just cap it like this: 

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

 

 

[CodeTest]

thank you so much for sorting the drag issue thats perfect thank you.

 

Quote

Are you saying you literally want to force the user not to be able to scroll back up to the intro? So they'd see the scrollbar, and if they drag it up, you want the browser to just refuse? That sounds super frustrating for users.

 

Yes....  (I know, I completely understand how it sounds, but the intro isn't needed once you reach the horizontal section. Best way to explain it is, its the navigation for the rest of the website) It was a requirement that the user should just be able to see and use the horizontal scroll section (at 100vh) once they pass the intro section.

 

When I was looking at solutions, I was looking at observers, but I wasn't sure if this is the best way to go about it? 

 

Help! hoping to get some support with this please

 

[GreenSock]

It depends on if you want the user to actually see a scrollbar and have access to it. If not, Observer is perfect. If you want to have that scrollbar, then personally I think that'd be a nightmare from a UX standpoint as I explained above. I'd be super ticked if the browser absolutely refused to let me use the scrollbar at the very top (as if I could only drag to a certain point and then it just stops?) 

 

But yeah, you could give Observer a shot. It's not really something we can build for you for free, but if you get stuck on a specific question, feel free to post back here with a minimal demo. 

 

Good luck!

[CodeTest]

Thanks for that I'll give it a go!

[CodeTest]

Hi again. Please can you help me with my codepen. I can get it to work if the sections are fixed position at 100vh and sections move up and only the slider section is visible; scrollbar is also at the top. Here is this example:

See the Pen GRedLBY by Code-Test24 (@Code-Test24) on CodePen

 

However the intro section is taller than the viewport height, so I can't have fixed position. I'm struggling to get it to work.

See the Pen gOEzEpw by Code-Test24 (@Code-Test24) on CodePen

 

Can I get some support with this please?
 

[GreenSock]

Your first CodePen (the one you said works) is using Observer and no scrollbar at all. But your "problem" CodePen appears to use native scrolling. Wasn't the entire idea of switching to Observer to eliminate that? So you basically have to re-engineer your approach completely so that you're just using "animation" to create the appearance of scrolling. That'll likely involve restructuring your CSS (and maybe markup). For example, maybe each section is positioned absolutely, sitting on top of each other just off-screen, and then you animate the appropriate one on when necessary (fake scroll).

 

If you'd like some help, please simplify your CodePen to only show the very specific problem you're struggling with in the simplest way possible. Isolating is always key in situations like this. Remove as much complexity as possible (like the Draggable functionality). 

[CodeTest]

ok thank you for the direction, I'll give it a go!

I was also wondering, is there a way to stop the drag throwing you back up the page to the intro section when you go back to the start of the slider? (a question relating to the first original codepen!) It was a just a thought and I wondering if it was possible?

[Rodrigo]

Hi, 

 

As Jack mentioned before, not allowing users to get back to a specific point using the scroll bar when there is scroll space sounds like bad UX, maybe something like this could be better?

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

 

Hopefully this helps.

Happy Tweening!

[CodeTest]

Hi @Rodrigo  thank you so much for this example, its perfect.

It might have been the way I was explaining, but this is literally the outcome I'm after. We're not looking to stop the user going to a space that seems to be there, that would be annoying. So I apologise for the way I explained above. 

 

Thats exactly what I wanted. 

 

Just out of curiosity is this at all possible? :

Quote

I was also wondering, is there a way to stop the drag throwing you back up the page to the intro section when you go back to the start of the slider? (a question relating to the first original codepen!) It was a just a thought and wondering if it was possible?

 

You've really helped me out, thank you

[Rodrigo]

19 minutes ago, CodeTest said:

Just out of curiosity is this at all possible? 

As far as I can tell no, but I never even tried to do something like that so I've never searched for such implementation. Probably with enough custom logic it could be achieved but the costs in terms of performance and UX might not justify all the effort IMHO.

 

Happy Tweening!

[CodeTest]

No problem!

Thank you @GreenSock and @Rodrigo for resolving this issue!

[CodeTest]

Hi, please could you help me to get this working with my slider.

See the Pen gOEjpaZ by Code-Test24 (@Code-Test24) on CodePen

 

if you comment out lines 7-18 in JS and comment out absolute position for main in css (line 13), the slider works... 

can you see whats causing the issue? 

 

[Rodrigo]

Hi,

 

Is super simple actually, you're creating two conflicting ScrollTrigger instances. They both have the same trigger element and they both start at the same point, one has start: "top top" and the other doesn't have a start value so it defaults to "top bottom" and their both pinning the target element, that's why when you comment one out it works as expected. For the Container Animation feature to work there is no need to create two ScrollTrigger instances, just one for the horizontal motion and pinning of the element.

 

Hopefully this clear things up.

Happy Tweening!

[CodeTest]

19 hours ago, Rodrigo said:

Is super simple actually, you're creating two conflicting ScrollTrigger instances. They both have the same trigger element and they both start at the same point, one has start: "top top" and the other doesn't have a start value so it defaults to "top bottom" and their both pinning the target element, that's why when you comment one out it works as expected. For the Container Animation feature to work there is no need to create two ScrollTrigger instances, just one for the horizontal motion and pinning of the element.

Makes sense, but the end target for both are different though? how would that work?

 

[CodeTest]

@Rodrigo any thoughts on the above please?

[Rodrigo]

Hi,

 

Regardless of the fact that they have different end points, there is a chance that both start points could overlap and on top of that both ScrollTrigger instances have pin: true, so that adds pin spacing below the ScrollTrigger's trigger element or the specific element being pinned, so that would pin the same element twice, that is not needed at all. Check the base demo we have for the Container Animation feature:

 

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

 

As you can see there is only one ScrollTrigger instance there for the horizontal animation of the slides, which pins the container of the slides, so there is no need for two ScrollTrigger instances on that particular element, especially when the trigger element is being pinned.

 

Hopefully this clear things up.

Happy Tweening!

[CodeTest]

See the Pen LYaBXya by Code-Test24 (@Code-Test24) on CodePen

 

Is the solution merging it and putting them into 1 ScrollTrigger? I have tweaked my code but I'm aware the issue of what you're saying is the same. I think I'm struggling with the fact that I want 2 things to happen at one trigger point, both different end points. Sorry to be a pain 

[Rodrigo]

Hi,

 

Even though you have provided a minimal demo you haven't provided a clear description of the problem you're having or what you're trying to do so I'm just guessing here.

 

Finally your latest demo STILL has two ScrollTrigger instances that are pinning the same element

 

Please be specific about what you're trying to do in order to find a way to help you.

 

I would strongly suggest you to get your HTML/CSS working as expected first, then create a GSAP Tween/Timeline that makes the slides go to the right as expected and once you have all that working, start creating the container animation Tweens. Here is a fork of your codepen with all the JS commented out and every element being visible and IMHO the structure is a bit messy so first correct that:

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

 

Happy Tweening!

[CodeTest]

 

Hi @Rodrigo

 

it’s all above, not sure if you've read my issue below my codepen?

 

My issue is I want to hide the intro when I reach the horizontal scroll which works perfectly if you look at the first codepen in this topic.

 

As mentioned already I’m fully aware there’s still 2 ScrollTriggers, and I’ve mentioned what I’m struggling with to get the hide intro working with my horizontal scroll slider (which works but is broken after I added the hide intro section) which again I’m aware is because of the 2 ScrollTriggers.

 

Summary:

My horizontal scroll works (first codepen) 

I can get the intro to hide, but then breaks the slider because of the 2 ScrollTriggers

 

Is the solution merging it and putting them into 1 ScrollTrigger? I have tweaked my code but I'm aware the issue of what you're saying is the same. I think I'm struggling with the fact that I want 2 things to happen at one trigger point, both different end points.

 

You've explained already about the 2 scrolltrigger issue, but how do I resolve that if I want 2 things to happen at the same time with different end targets? You've understood my issue... its literally still the same issue I'm having, struggling to get it working. 

[Rodrigo]

Hi,

 

So just to be sure you want to pin a section after removing the first section and also prevent for that section from being visible again? So in this demo after hiding the hero section pin the first section and create a container animation inside that first section?

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

 

If that's the idea, honestly IDK about it. The best approach IMO would be to mix Observer and ScrollTrigger. Use Observer for hiding the hero section while setting the overflow to hidden on the body/html tags, and once that is done show the overflow and allow the ScrollTrigger instances to run or use Observer's prevent default config like this demo:

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

 

Unfortunately I don't have a lot of time right now to tweak the demo, maybe tomorrow I could whip something, so I'd encourage you to get familiar with Observer in order to try to achieve it:

https://gsap.com/docs/v3/Plugins/Observer/

 

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

 

Happy Tweening!

[CodeTest]

Hi @Rodrigo

 

This is my codpen where everything works as expected, no issues at all. I just want to hide the purple section when you get to the horizontal section. 

 

See the Pen vYPzNNM by Code-Test24 (@Code-Test24) on CodePen

 

Your following demo seems perfect: 

 

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

 

But I'm struggling to implement it with my work. Please can I get some support with this? 

[Rodrigo]

Hi,

 

As I mentioned is just about using the Observer Plugin, here is a fork of my previous demo using Observer and ScrollTrigger:

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

 

Is worth noticing that Jack and I have suggested you to use the Observer Plugin for achieving this, so it would be a good thing that you check the docs and our demos collections:

https://gsap.com/resources/demos

 

Hopefully this helps.

Happy Tweening!