Share Posted July 27, 2021 Hi there, I am after some help with using a draggable range slider to control my timeline. It is all set up and moves the timeline, updating the progress, but the final value falls short of the end of the timeline. I have set a max-height for the main container to create a window, and am using the inner container height, minus the height of the scrubber and the height of the draggable handle to work out the progress, but the final progress doesn't reach 1. I will be flipping to the x axis on mobile, but for now cracking why the y axis won't reach 1 is my focus. Any help would be greatly appreciated! Thanks, Jack See the Pen RwVQaGG by jackkemm (@jackkemm) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted July 27, 2021 Hey there @jackkemm, Ooh this was a fun one! Check this utility method out - https://greensock.com/docs/v3/GSAP/UtilityMethods/mapRange() The utility methods baked in to GSAP's core are *so* useful, and this one is perfect for this use case. I've refactored your pen to include it. All you need to know is the height of the scrubber bar, then we map the scrubber progress to the timeline range (0 -1) I added in a max height to your scroll bar too as it was being cut off on smaller screens. As it's no longer a fixed 600px height this means that resizing may affect the mapping so I've added an update function too to keep things nice and synced up. woo! GSAP utils to the rescue! See the Pen f42f597a0b28fd69fd6a75c6548140c7?editors=0111 by cassie-codes (@cassie-codes) on CodePen You've got a lot of vars now that you don't really need but I'll leave that for you to tidy. ☺️ 3 Link to comment Share on other sites More sharing options...
Author Share Posted July 27, 2021 Hey Cassie, Thanks for the quick response! I knew there'd be something in GSAP that would save the day. I can see now the timeline goes off the top of the screen, is there a way to stop the timeline when the draggable handle reaches the bottom? It doesn't seem to quite marry up? I am currently translating the y position of the container using its height, not sure if this is causing it to fly off. I will defo clean it up when I stick it back into the project thank you haha. Thanks, Jack Link to comment Share on other sites More sharing options...
Author Share Posted July 27, 2021 Sorry ignore me, I just minused the width of the scrubber and draggable handle from the height of the container and works a charm. Thank you for your help Cassie! 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