Jump to content
Search Community

Draggable range controlling timeline progress

jackkemm test
Moderator Tag

Go to solution Solved by Cassie,

Recommended Posts

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

  • Solution

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. ☺️

  • Like 3
Link to comment
Share on other sites

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

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...