Jump to content
Search Community

Scrolltrigger custom scroll bar isn't linear

AniMartin test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution

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

  • Like 5
Link to comment
Share on other sites

 

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 :) 

 

  • Like 4
Link to comment
Share on other sites

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 :unsure:

 

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 :roll:

 

You both solved it but Cassie was first. Can I share the solution button? :D

 

Thanks again peeps. 

 

  • Like 3
  • Haha 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...