Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Robbert89

Responsive ThrowProps

Recommended Posts

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

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

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

×