lvekua Posted July 3, 2023 Posted July 3, 2023 Hi Guys, is it possible to create similar scroll without scrollbar.js plugin? See the Pen oNQBOgB?editors=0110 by lvekua (@lvekua) on CodePen.
SteveS Posted July 3, 2023 Posted July 3, 2023 The pinned text with images is somewhat simple to achieve and does not require Scrollbar.js If you are talking about smooth scrolling, there is a paid GSAP plugin, ScrollSmoother, that can be used to get smooth scrolling. 2
Rodrigo Posted July 3, 2023 Posted July 3, 2023 Hi, I don't see why not. Is worth mentioning that scrollbar.js is not a GSAP related product so we can't offer support for it, we need to keep the limited time resources we have focused on GSAP related issues. Luckily for us @akapowl, one of the superstars of the forums, has these examples: See the Pen poeoONq by akapowl (@akapowl) on CodePen. See the Pen wvJroYy by akapowl (@akapowl) on CodePen. See the Pen xxXmBZL by akapowl (@akapowl) on CodePen. Hopefully those helps. Happy Tweening! 2
akapowl Posted July 3, 2023 Posted July 3, 2023 2 hours ago, lvekua said: Hi Guys, is it possible to create similar scroll without scrollbar.js plugin? Yes, of course, smooth-scrollbar.js is just a 3rd party plugin for smooth-scrolling - you can do the same thing without any smooth-scrolling at all. That example of mine that very likely was the base of your pen, as is, will only work in this scenario with smooth-scrollbar, though - because it technically is not 100% correct, but apparently it doesn't matter there. If you're just looking for a version of that example without any smooth-scrolling, have a look at the thread it originated from; e.g. in this post: It is also worth having a look at the thread that I link to in many of my answers of that thread above - it contains examples with GreenSock's ScrollSmoother integrated instead of smooth-scrollbar and also a simplified approach, e.g. in this post: These should get you on the right track. Good luck with your project! 2
lvekua Posted July 4, 2023 Author Posted July 4, 2023 Wow guys! @SteveS @Rodrigo @akapowl thank you so much for the effort to help. Yes I just want to remove the third party scrollbar plugin without breaking the current scrolling functionality and I haven't been successful yet. Most examples I looked at are either using ScrollSmoother (which I cannot afford, yet) and/or scrolling both sides. I just need to pin the left side text (as in my codepen) until all images are scrolled vertically on the right.
Rodrigo Posted July 4, 2023 Posted July 4, 2023 Hi, There are several examples in this thread already that have a series of different solutions for the scenario you have in your first post. Here are a couple of extra examples as well: See the Pen NWMZrbj by GreenSock (@GreenSock) on CodePen. See the Pen eYQYxJW by GreenSock (@GreenSock) on CodePen. As I mentioned in my previous post, we don't have the time resources to build custom solutions for our users, sorry. You can post in the Jobs & Freelance forums if you want to get some help there. We're more than ready to help you if you get stuck with some GSAP related issue, just remember to include a minimal demo. Good luck with your project. Happy Tweening! 1
lvekua Posted July 5, 2023 Author Posted July 5, 2023 @Rodrigo Again, thank you very much for examples. I was able to scramble something together See the Pen RwqZQbV by lvekua (@lvekua) on CodePen. If someone could take a look and let me know if its set up correctly I'd really appreciate it!
Solution Rodrigo Posted July 5, 2023 Solution Posted July 5, 2023 Hi, Looks nice, great work! Maybe the only thing is to use yPercent instead of translateY, and definitely you don't need a function based value there. Finally since everything goes in one section maybe just create a single timeline for the whole thing, no need to create all the extra timelines and ScrollTrigger instances for each element. Something like this: See the Pen vYQJrPj by GreenSock (@GreenSock) on CodePen. Hopefully this helps. Happy Tweening! 1
lvekua Posted July 6, 2023 Author Posted July 6, 2023 15 hours ago, Rodrigo said: Hi, Looks nice, great work! Maybe the only thing is to use yPercent instead of translateY, and definitely you don't need a function based value there. Finally since everything goes in one section maybe just create a single timeline for the whole thing, no need to create all the extra timelines and ScrollTrigger instances for each element. Something like this: Hopefully this helps. Happy Tweening! @Rodrigo Thank you so much! This is much cleaner and I feel like its performing much better. Thanks again! 1
lvekua Posted July 9, 2023 Author Posted July 9, 2023 Hey Guys, I just added fade in effect to the text and it works, but doesn't feel right. I used the same trigger in two different instances, feels like they way I did it is not the right way and there is a better way. Looked through the docs and couldn't find anything relative. Could you please take a look at this pen? I'd really appreciate it! See the Pen RwqZQbV?editors=1010 by lvekua (@lvekua) on CodePen.
Cassie Posted July 10, 2023 Posted July 10, 2023 Could you elaborate on 'doesn't feel right.' Do you mean visually or your code approach? What are you aiming for and what are you seeing right now that you dislike? Are you maybe wanting to put it all onto one timeline instead of using two scrollTriggers?
lvekua Posted July 10, 2023 Author Posted July 10, 2023 Sorry if I didn't make my point clear. 1 hour ago, Cassie said: Are you maybe wanting to put it all onto one timeline instead of using two scrollTriggers? Yes, that is exactly what I meant feels like there is a cleaner way to write the same code.
Cassie Posted July 10, 2023 Posted July 10, 2023 It's usually handy to get rid of loops and other 'clever' code when you're starting off with GSAP, just write nice standard timelines, it's ok if it looks repetitive, easy to read and easy to adjust is way more helpful! Here's a timeline rewritten with separate classes instead of a loop, you can see how you can slot in new animations See the Pen abQVYXL?editors=0010 by GreenSock (@GreenSock) on CodePen. If you're confused about how, take a look at the position parameter 1
lvekua Posted July 10, 2023 Author Posted July 10, 2023 @Cassie Much appreciated! this makes lot of sense.
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