Jump to content
Search Community

RoundProps on Draggable (incl. throwProps = true)

jash test
Moderator Tag

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

Hi,

 

simple question: How can i tell a Draggable that all values during dragging and during throwing are rounded values. During dragging it seams that it uses rounded values already, but when it came to the second part, where a tween for throwing takes control, the values are not rounded anymore. This leads to blurry text or little gaps i.e. between images (translate3D(23.3234233, ...).

 

I know i can request the tween (via draggable.tween), which is created after onDragEnd, but i have no chance to set roundProps to a tween instance which is already created?

 

In my view, the easiest solution would be to have a roundProps-properties to set via the vars-object when creating a Draggable.

 

Draggable.create("#yourID", {type:"x", throwProps:true, roundProps:["x"]});
 
Thanks.
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the suggestion. Will have to think it over a bit.

One issue that comes to mind is that there are multiple occasions where the user may or may not want rounding: during the drag, during the ThrowProps tween, after the ThrowProps tween completes. 

 

So in your case, you may really want the tweens to end on whole pixel values but realize that forcing whole values during the tween looks much worse (which it does).

 

One easy solution to get whole-pixel snapping is to use left and right as opposed to x and y. The browser can only render those values on whole-pixel values. Downside: animation that is less smooth.

 

 

The Draggable API already gives you very fine control over how the values are set using the snap and liveSnap properties.

In order to ensure that your throwProps tween always lands on whole pixel values you can use the snap property to run the endValue through a function that wil convert it into an integer like so:

 

Draggable.create(".box", {
bounds:$container,
edgeResistance:0.65,
type:"x,y",
throwProps:true,
snap:{
x: function(endValue) {
return parseInt(endValue)},
y: function(endValue) {
return parseInt(endValue);
}
}

Demo: http://codepen.io/GreenSock/pen/IwtfC/

 

If you want to snap to whole pixel values during drag, you can use the liveSnap property in a similar fashion.

http://greensock.com/docs/#/HTML5/GSAP/Utils/Draggable/

 

Let us know if this works for you.

  • Like 3
Link to comment
Share on other sites

Thank you for your really good answer. Both solutions working perfectly. Setting "liveSnap: true", will snap the pixels also during dragging. So i think with "snap" and "liveSnap", there is no need for a special property "roundProps" for Draggable. Maybe just a little hint in the documentation would be helpful (keywords: whole pixels, pixel-snapping, roundProp,..)

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.
×
×
  • Create New...