How can I control the animation and transformation of the dragged item in response to mouse-movement? (e.g. physics-aware dragging, gravity, pendulum swings, etc)

[daiplusplus]

I'm using SortableJS to allow users to drag items between lists - just like Trello.

I'm wanting to add a subtle kinetic effect to dragging, so that dragging items faster would make them "swing" or otherwise act like a pendulum in response to mouse movement. (Don't worry, I'm not asking how to do the mathematics to implement that).

The problem is I'm using SortableJS' own animation code, which overwrites the transformation matrix in HTMLElement.style.transform on each animation tick (see the animate function in https://github.com/SortableJS/Sortable/blob/master/src/Animation.js ). Instead, I'd like to "override" the animation function (in an OOP-sense) such that for each animation tick I can run my own prep code, then call SortableJS' animation function, then apply my own transformation matrices on top of SortableJS' transformation.

It doesn't look like there's any hooks or way to get my own code to run inside SortableJS' animate - at least not without modifying SortableJS directly, which isn't ideal.

Assuming what I'm asking is possible, what other approaches could be used?

Also, I noticed that SortableJS isn't using CSS/DOM animations, instead it's manually animating itself via setTimeout - are there any plans to use CSS animations and requestAnimationFrame instead? Every browser released in the past 10 years supports requestAnimationFrame so it's unusual to see a popular library not using it (even as an opt-in).

[owen-m1]

@Jehoel Just to clarify - Are you talking about adding this kinetic effect to the ghost (the element that moves with the mouse) or the actual elements in the list that are swapped around as you drag?

[owen-m1]

@Jehoel Okay, well that animation code you were looking at is only for the items in the actual list. The code for moving the ghost can be found here: https://github.com/SortableJS/Sortable/blob/master/src/Sortable.js#L791

I will look later today at how you might be able to go about adding that effect

[owen-m1]

@Jehoel Okay I think you might be able to do this using the fallbackOffset option.
In your animation frame you would do something like:

sortableInstance.option('fallbackOffset', {
    x: myCalculatedOffsetX,
    y: myCalculatedOffsetY
});

where the offset is just an offset from the original position it would be in.
x: 0, y: 0 is the default.

Let me know if this is helpful

[daiplusplus]

That only lets me control the x/y offsets, but I want to be able to directly control the CSS transform: property (so I can do 3D rotation, perspective transform, etc).

[owen-m1]

@Jehoel Well you would have to modify the Sortable code to do that. This line is where the matrix (transform) is applied to the ghost element, so maybe you could add your code to Sortable or add an option to Sortable to let you override that matrix. If you add an option feel free to make a PR for it.

[daiplusplus]

Acknowledged. I’m not (currently) working on my day-job’s project that uses Sortable, but when I resume on that project I’ll pick-up from here and see about getting a PR-in to allow greater control over animation. This would be within a couple mo this from now.

I’m also crazy-mad about TypeScript... so how amenable would you be to me converting SortableJS to TypeScript first, and then doing animation customisation on-top of that? Converting the core source of SortableJS to TypeScript looks like a fun weeklong project my employer would basically be paying me to do...