Jump to content


Responsive ThrowProps

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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 comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

  • 4 months later...

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! 

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