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

Share this post


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 3

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×