AniMartin Posted June 13, 2021 Share Posted June 13, 2021 Hi folks, GSAP is epic, thanks for making it! First time posting here but appreciated these forums for a while now. I am posting because I have a slightly odd problem I can't seem to nail down. I have created a custom scroll bar that is linked directly to the scroll position with a linear ease. The issues is it isn't acting linear. As the circle moves from section 1 to section 2 it is slightly early. Moving from section 3 to section 4 is slightly late but the start, middle and end points are bang on. Very confusing. Anyone know why this might be happening? See the Pen NWpEPyx by MD1618 (@MD1618) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted June 13, 2021 Solution Share Posted June 13, 2021 trigger: "scroll-plane" isn't actually referring to anything because you've missed the class '.' out. Even if that was working - your scrollbar and sections have different start and end points, so they wouldn't be synced up. I've refactored it for you with some markers added so you can see what's happening. I've also popped the sections code into a loop so you don't have to write it out four times! See the Pen 91d8107ae1156ec61c2c1854a2e1efa4 by cassie-codes (@cassie-codes) on CodePen 5 Link to comment Share on other sites More sharing options...
akapowl Posted June 13, 2021 Share Posted June 13, 2021 Hey @AniMartin - welcome to the forums. 5 hours ago, AniMartin said: I have created a custom scroll bar that is linked directly to the scroll position with a linear ease. The issues is it isn't acting linear. Actually it is very much acting linear - the problem here is that your timing doesn't match up. You are triggering the scrubbing to start at top top already, so the triggering points of your other scroll-triggers aren't synced to that. Here's what I mean. If you change the duration of your scrubbing-ScrollTrigger to be respective to the other ScrollTriggers, it works pretty well. See the Pen c3c88894848269fff682fd64493c6606 by akapowl (@akapowl) on CodePen ...and now I see, that Cassie has already replied - but I'm gonna post nonetheless - maybe that helps, too 4 Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2021 Share Posted June 13, 2021 5 hours ago, AniMartin said: GSAP is epic, thanks for making it! First time posting here but appreciated these forums for a while now. Also hi and welcome! 🥳 Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2021 Share Posted June 13, 2021 Sorry for doubling up on that @akapowl! Link to comment Share on other sites More sharing options...
akapowl Posted June 13, 2021 Share Posted June 13, 2021 5 minutes ago, Cassie said: Sorry for doubling up on that @akapowl! 😅 All good @Cassie ... it was me who was late to the party ...funny how our demos do show pretty much the same (although yours is a bit nicer with the loop included). Link to comment Share on other sites More sharing options...
AniMartin Posted June 13, 2021 Author Share Posted June 13, 2021 Hi @Cassie and @akapowl! Thanks for the warm welcomes and for taking the time to help. Good spot about the different start and end points. Wonder how long it would have taken me to figure that out I should have used the Scrolltrigger tools. Nice DRY refactor there @Cassie, good work! Missing a "." means I have to reset my "How many days since my last face palm" chart You both solved it but Cassie was first. Can I share the solution button? Thanks again peeps. 3 1 Link to comment Share on other sites More sharing options...
Cassie Posted June 13, 2021 Share Posted June 13, 2021 No worries pal, happy to help. 1 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