CodeTest Posted February 2 Share Posted February 2 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 Link to comment Share on other sites More sharing options...
GreenSock Posted February 3 Share Posted February 3 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 1 Link to comment Share on other sites More sharing options...
CodeTest Posted February 3 Author Share Posted February 3 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 Link to comment Share on other sites More sharing options...
GreenSock Posted February 4 Share Posted February 4 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! 1 Link to comment Share on other sites More sharing options...
CodeTest Posted February 4 Author Share Posted February 4 Thanks for that I'll give it a go! Link to comment Share on other sites More sharing options...
CodeTest Posted February 4 Author Share Posted February 4 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? Link to comment Share on other sites More sharing options...
GreenSock Posted February 5 Share Posted February 5 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). Link to comment Share on other sites More sharing options...
CodeTest Posted February 5 Author Share Posted February 5 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? Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted February 5 Solution Share Posted February 5 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! 1 1 Link to comment Share on other sites More sharing options...
CodeTest Posted February 5 Author Share Posted February 5 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 5 Share Posted February 5 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! 1 1 Link to comment Share on other sites More sharing options...
CodeTest Posted February 5 Author Share Posted February 5 No problem! Thank you @GreenSock and @Rodrigo for resolving this issue! Link to comment Share on other sites More sharing options...
CodeTest Posted February 6 Author Share Posted February 6 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? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 6 Share Posted February 6 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! Link to comment Share on other sites More sharing options...
CodeTest Posted February 6 Author Share Posted February 6 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? Link to comment Share on other sites More sharing options...
CodeTest Posted February 7 Author Share Posted February 7 @Rodrigo any thoughts on the above please? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 7 Share Posted February 7 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! Link to comment Share on other sites More sharing options...
CodeTest Posted February 7 Author Share Posted February 7 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 Link to comment Share on other sites More sharing options...
Rodrigo Posted February 7 Share Posted February 7 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! Link to comment Share on other sites More sharing options...
CodeTest Posted February 7 Author Share Posted February 7 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. Link to comment Share on other sites More sharing options...
Rodrigo Posted February 7 Share Posted February 7 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! Link to comment Share on other sites More sharing options...
CodeTest Posted February 8 Author Share Posted February 8 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? Link to comment Share on other sites More sharing options...
Rodrigo Posted February 8 Share Posted February 8 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! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now