DemonEX Posted August 22, 2023 Share Posted August 22, 2023 Hello there, I would like to make a slider at the same time as a pinned element so that scrolling is possible only after all slides have been scrolled. Please, look at the example i have prepared. I've made a slider that work, but so many bugs there Could you please help me to find a better way to solve my problem? See the Pen QWzwJVX by rojangsc-the-selector (@rojangsc-the-selector) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted August 22, 2023 Solution Share Posted August 22, 2023 Hi there, Maybe this demo will be of use? See the Pen LYMVPVa?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
DemonEX Posted August 22, 2023 Author Share Posted August 22, 2023 @Cassie Hi, Cassie! Thanks a lot for your answer. I'm going to deal with this example, but, omg, i can't even understand how it works 🫣 1 Link to comment Share on other sites More sharing options...
Cassie Posted August 22, 2023 Share Posted August 22, 2023 Heya, well I'd be happy to help with your demo instead, but I'm not sure what you meant by "so many bugs" If you can explain a little more clearly about your goal there may be a simpler solution? Similarly if you're confused about a specific part of the other demo I linked to then I'll happily explain. There are a ton of comments in the code though, so maybe just step through slowly, read the observer docs and pop back if you're still confused? https://greensock.com/docs/v3/Plugins/Observer I've simplified that demo slightly and replaced it in case that helps? 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 22, 2023 Share Posted August 22, 2023 Hi, I agree with Cassie, it would be great if you could be as explicit as possible about the issue you're having. Based on the title of your thread and the codepen demo you posted it seems that you don't want the space after the horizontal section that is created by pinning said section (the one with class="advantages-list-1"). If that's the case the best approach is to wrap the target section and the next one in an extra element and pin that parent element. I made a fork of your codepen: See the Pen ZEVGzRq by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 1 Link to comment Share on other sites More sharing options...
DemonEX Posted August 23, 2023 Author Share Posted August 23, 2023 @Cassie @Rodrigo First of all, I really appreciate your help and participation. Thanks to Cassie's example, I've created a solution that is very close to my expectations. The delay after pinning and before unpinning is a little bit confusing, but it's ten times better than what I had before. v2 The next question is about the "intentObserver" part of the example. I don't quite understand how it prevents normal scrolling. Therefore, I'm planning to study the documentation that Cassie attached to her last comment. 1 Link to comment Share on other sites More sharing options...
Rodrigo Posted August 23, 2023 Share Posted August 23, 2023 Hi, The reason is this config right here: const intentObserver = ScrollTrigger.observe({ // ... type: 'wheel,touch', preventDefault: true, }); Basically the Observer instance is preventing the default event action from happening. Is worth noticing that this only prevents wheel and touch events, so in a desktop/laptop browser the user could still drag the scroll bar and scroll normally which will lead to unexpected behaviour, that and the reason that it was intended originally for being used internally is the reason is not documented. 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