Responsive ThrowProps

[Robbert89]

Hello,

 

Since today i started using ThrowProps and i really like it  I started this topic because i would like to know more about how things work. In the codepen there is a simple range slider, which has a knob and a range. I tried to divide the snap points evenly so the knob will stop at 0%, 25%, 50%, 75% and 100%.

This works, however.. when i resize the window it looses coordination and ThrowProps starts to snap on odd places. Is there a proper way to solve this with window.resize() function? Or is there something better i could do?

Another thing i don't understand yet is this: i created an <ul> with five <li> items, so i could divide the items over 0%, 25%, 50%, 75% and 100% (same as snap points). I figured that then i can use them as indicators for the snapping points. 

display: flex;
justify-content: space-between;

But if you look closely you can see that each snapping point has more overlap compared to the dividers below. Am i taking the wrong approach on this, or am i just missing something (im fairly new to javascript and gsap).

Would love to hear from you guys, how you would approach a simple case like this.

See the Pen pozNgJG by Robbert89 (@Robbert89) on CodePen

[GreenSock]

Glad to hear you're enjoying the tools!

 

What you're asking for isn't exactly a super simple case, but here's one approach: 

See the Pen vYByKZN?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? Hopefully it's easy to dissect.

 

Happy tweening/dragging!

[Robbert89]

Hi Jack,

Thanks for looking into this!  Honestly i forgot about this post and ended up using a range slider. I did something like below and then animated based on the value.

<input type="range" min="0" max="100" value="0" step="any">

That said, clever approach Jack! I will take the time to understand everything going on there 🧐.

Thanks again, greatly appreciated!