Share Posted August 21, 2019 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 Link to post Share on other sites
Share Posted August 21, 2019 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! 4 Link to post Share on other sites
Author Share Posted January 7, 2020 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! 1 Link to post Share on other sites
