Use in conjunction with Greensock Draggable js? #4

Closed
studioleland opened this Issue Mar 11, 2014 · 16 comments

Projects

None yet

2 participants

@studioleland

Looking to achieve a touch ui with "throw to expand" image gallery with heavy touch interactivity offered by your codebase. Have you tested the GSAP Draggable script that allows for inertia based object "throwing" that snaps to a grid? I would love to see this play nice with your interact.js droppable code. Thoughts on how best to achieve this?

I greatly appreciate any direction as I have not seen any other examples on this around the interwebs.

@taye
Owner
taye commented Mar 11, 2014

Inertia has been on my mind for a while and I plan on implementing it eventually. I am however unsure of what an ideal API would be so I've been mulling over it for a few months while working on other things. I didn't know about the GSAP draggable and ThrowPropsPlugin. Thanks for mentioning them. After reading some of the docs and demos they've given me a few good ideas.

Are you specifically looking to use interact.js in conjunction with ThrowPropsPlugin? Presently, there's no easy way to do that since there's no velocityX, velocityY pair in events (only speed; I'll try to get them in soon).

For an interact.js-only solution, I thought of this:
image
Using path snapping to reposition the pointer to be on a line from the thumbnail position to the target area and use CSS transitions to move the thumbnail if the drag ends close enough to the target.

That's the simplest idea I have.

@studioleland

Yes,

The project calls for a throw behavior to drag and drop thumbnails into a
droppable target container to trigger enlargement of the thumbnail and snap
to a grid. I think everything is there for this using your codebase with
exception of inertia based drag or throw.

On Tue, Mar 11, 2014 at 1:18 PM, Taye A notifications@github.com wrote:

Inertia has been on my mind for a while and I plan on implementing it
eventually. I am however unsure of what an ideal API would be so I've been
mulling over it for a few months while working on other things. I didn't
know about the GSAP draggable and ThrowPropsPlugin. Thanks for mentioning
them. After reading some of the docs and demos they've given me a few good
ideas.

Are you specifically looking to use interact.js in conjunction with
ThrowPropsPlugin? Presently, there's no easy way to do that since there's
no velocityX, velocityY pair in events (only speed; I'll try to get them
in soon).

For an interact.js-only solution, I thought of this:
[image: image]https://f.cloud.github.com/assets/1679746/2388990/3a8db178-a948-11e3-9f0e-275c84a6c199.png
Using path snapping to reposition the pointer to be on a line from the
thumbnail position to the target area and use CSS transitions to move the
thumbnail if the drag ends close enough to the target.

That's the simplest idea I have.

Reply to this email directly or view it on GitHubhttps://github.com/taye/interact.js/issues/4#issuecomment-37330502
.

Cheers,

Leland Zaremba

31two Creative Studio
Principal Developer
+1.312.288.8512 - HQ
+1.612.616.3106 - mobile

This message may contain confidential and/or privileged information. If you
are not the addressee or authorized to receive this for the addressee, you
must not use, copy, disclose, or take any action based on this message or
any information herein. If you have received this message in error, please
advise the sender immediately by reply e-mail and delete this message.
Thank you for your cooperation.

@taye
Owner
taye commented Mar 12, 2014

I'll try to get inertia and end target calculation in - it should take a week or two. I'll keep you posted. Let me know if there are any specific details that you'd like to see in the implementation.

@studioleland

Snap to grid within container would also be really great! I am hoping to use this codebase in conjunction with the WP media gallery to achieve a touch based WP framework. Happy to credit your codebase and donate for your time. Please let me know if that would help speed up development :)

@taye
Owner
taye commented Mar 13, 2014

Snap to grid within container would also be really great!

I'm not sure if it's exactly what you're looking for, but there's Interactable#restrict which keep coordinates (after calculating snapping) within a given rectangle (an element or rectangle-like object). It doesn't consider the dragged element's dimensions and only modifies the event coordinates so it would probably take some work to make it very useful.

I am hoping to use this codebase in conjunction with the WP media gallery to achieve a touch based WP framework. Happy to credit your codebase and donate for your time. Please let me know if that would help speed up development :)

It's nice to see that my code is useful and I'd be very happy to help you out with your project though I don't know how much time I can offer. My email address is on my Github profile if you'd like to give me more info.

@taye
Owner
taye commented Mar 16, 2014

I've implemented a simple inertia event phase that currently only allows one element to be interacted with. I should eventually be able to allow multiple objects to be interacted with simultaneously.

demo: http://rawgithub.com/taye/interact.js/inertia/demo/snap.html
docs: http://rawgithub.com/taye/interact.js/inertia/docs/index.html#Interactable.inertia
code: https://rawgithub.com/taye/interact.js/inertia/interact.js

@studioleland

This is great! Testing today.

Cheers,

Leland Zaremba

Sent securely by Morse code.
On Mar 12, 2014 5:55 AM, "Taye A" notifications@github.com wrote:

I'll try to get inertia and end target calculation in - it should take a
week or two. I'll keep you posted. Let me know if there are any specific
details that you'd like to see in the implementation.

Reply to this email directly or view it on GitHubhttps://github.com/taye/interact.js/issues/4#issuecomment-37395905
.

@studioleland

What should I try to test in order to allow for a list of thumbnails to be
"throwable" into a large target container and then expand? I've been
testing your demo on my iPad and things seem to work well.

On Sunday, March 16, 2014, Leland Zaremba lelandzaremba@gmail.com wrote:

This is great! Testing today.

Cheers,

Leland Zaremba

Sent securely by Morse code.
On Mar 12, 2014 5:55 AM, "Taye A" <notifications@github.comjavascript:_e(%7B%7D,'cvml','notifications@github.com');>
wrote:

I'll try to get inertia and end target calculation in - it should take a
week or two. I'll keep you posted. Let me know if there are any specific
details that you'd like to see in the implementation.

Reply to this email directly or view it on GitHubhttps://github.com/taye/interact.js/issues/4#issuecomment-37395905
.

Cheers,

Leland Zaremba

31two Creative Studio
Principal Developer
+1.312.288.8512 - HQ
+1.612.616.3106 - mobile

This message may contain confidential and/or privileged information. If you
are not the addressee or authorized to receive this for the addressee, you
must not use, copy, disclose, or take any action based on this message or
any information herein. If you have received this message in error, please
advise the sender immediately by reply e-mail and delete this message.
Thank you for your cooperation.

@taye
Owner
taye commented Mar 18, 2014

I haven't done much more work since I got the basic inertia working but I plan to do two things which should make your application easier to implement:

  1. Allow snapping only at the end so that the normal user swipe can be unmodified while the inertia target is snapped/restricted.
  2. Use a quadratic curve to smoothly change the inertia path so that it moves to the snapped/restricted position.
@studioleland

These things will be perfect! I am already working on the framework for
testing. Once the UI is ready I will send over more feedback with your
basic JS applied.

On Tue, Mar 18, 2014 at 3:43 PM, Taye A notifications@github.com wrote:

I haven't done much more work since I got the basic inertia working but I
plan to do two things which should make your application easier to
implement:

  1. Allow snapping only at the end so that the normal user swipe can be
    unmodified while the inertia target is snapped/restricted.
  2. Use a quadratic curve to smoothly change the inertia path so that
    it moves to the snapped/restricted position.

Reply to this email directly or view it on GitHubhttps://github.com/taye/interact.js/issues/4#issuecomment-37985125
.

Cheers,

Leland Zaremba

31two Creative Studio
Principal Developer
+1.312.288.8512 - HQ
+1.612.616.3106 - mobile

This message may contain confidential and/or privileged information. If you
are not the addressee or authorized to receive this for the addressee, you
must not use, copy, disclose, or take any action based on this message or
any information herein. If you have received this message in error, please
advise the sender immediately by reply e-mail and delete this message.
Thank you for your cooperation.

@taye
Owner
taye commented Mar 21, 2014

I've implemented better inertia snapping/restrictions and added some related
settings to the snap demo:
http://rawgithub.com/taye/interact.js/95ef8ce/demo/snap.html

interact(element).snap({
    endOnly: true,
    mode: 'grid',
    grid: {x: 200, y: 200}
});

The endOnly setting will prevent snapping on normal pointer movement.
Instead, when the pointer is released a move event is created and snapped
immediately before the end event.

If the pointer release triggers inertia, the movement is curved to reach the
snapped end point instead of moving in a straight line.

interact.restrict({endOnly: true}) works similarly for restrictions.

Inertia is still pretty glitchy and blocks all other actions when it's running.
Allowing concurrent event sequences will be a lot of work.

@taye
Owner
taye commented Mar 23, 2014

A few notable improvements:

  • A bunch of bug fixes
  • Allow the user to regain control during inertia

If the event target is the inertia target element and the resulting
action of the event is the same as the current inertia action then
inertia is stopped and the event sequence continues as normal.

The latest code is at https://rawgithub.com/taye/interact.js/inertia/interact.js

@taye taye referenced this issue Mar 24, 2014
Merged

Inertia #5

@studioleland

This is really great! Do you happen to have a demo anywhere of a group of
list objects like a small thumbnail gallery with a generic throw/drag tween
applied using your latest changes with the inertia to use as a starting
place for my work?

On Sunday, March 23, 2014, Taye A notifications@github.com wrote:

A few notable improvements:

  • A bunch of bug fixes
  • Allow the user to regain control during inertia

If the event target is the inertia target element and the resulting
action of the event is the same as the current inertia action then
inertia is stopped and the event sequence continues as normal.

The latest code is at
https://rawgithub.com/taye/interact.js/inertia/interact.js

Reply to this email directly or view it on GitHubhttps://github.com/taye/interact.js/issues/4#issuecomment-38399314
.

Cheers,

Leland Zaremba

31two Creative Studio
Principal Developer
+1.312.288.8512 - HQ
+1.612.616.3106 - mobile

This message may contain confidential and/or privileged information. If you
are not the addressee or authorized to receive this for the addressee, you
must not use, copy, disclose, or take any action based on this message or
any information herein. If you have received this message in error, please
advise the sender immediately by reply e-mail and delete this message.
Thank you for your cooperation.

@taye
Owner
taye commented Mar 26, 2014

I've been busy lately, I'll try to make a few new demos soon.

On 24 March 2014 18:10, studioleland notifications@github.com wrote:

This is really great! Do you happen to have a demo anywhere of a group of
list objects like a small thumbnail gallery with a generic throw/drag tween
applied using your latest changes with the inertia to use as a starting
place for my work?

On Sunday, March 23, 2014, Taye A notifications@github.com wrote:

A few notable improvements:

  • A bunch of bug fixes
  • Allow the user to regain control during inertia

If the event target is the inertia target element and the resulting
action of the event is the same as the current inertia action then
inertia is stopped and the event sequence continues as normal.

The latest code is at
https://rawgithub.com/taye/interact.js/inertia/interact.js

Reply to this email directly or view it on GitHub<
https://github.com/taye/interact.js/issues/4#issuecomment-38399314>

.

Cheers,

Leland Zaremba

31two Creative Studio
Principal Developer
+1.312.288.8512 - HQ
+1.612.616.3106 - mobile

This message may contain confidential and/or privileged information. If you
are not the addressee or authorized to receive this for the addressee, you
must not use, copy, disclose, or take any action based on this message or
any information herein. If you have received this message in error, please
advise the sender immediately by reply e-mail and delete this message.
Thank you for your cooperation.

Reply to this email directly or view it on GitHubhttps://github.com/taye/interact.js/issues/4#issuecomment-38479807
.

@studioleland

No problem. Thanks for email.

On Wed, Mar 26, 2014 at 6:51 AM, Taye A notifications@github.com wrote:

I've been busy lately, I'll try to make a few new demos soon.

On 24 March 2014 18:10, studioleland notifications@github.com wrote:

This is really great! Do you happen to have a demo anywhere of a group of
list objects like a small thumbnail gallery with a generic throw/drag
tween
applied using your latest changes with the inertia to use as a starting
place for my work?

On Sunday, March 23, 2014, Taye A notifications@github.com wrote:

A few notable improvements:

  • A bunch of bug fixes
  • Allow the user to regain control during inertia

If the event target is the inertia target element and the resulting
action of the event is the same as the current inertia action then
inertia is stopped and the event sequence continues as normal.

The latest code is at
https://rawgithub.com/taye/interact.js/inertia/interact.js

Reply to this email directly or view it on GitHub<
https://github.com/taye/interact.js/issues/4#issuecomment-38399314>

.

Cheers,

Leland Zaremba

31two Creative Studio
Principal Developer
+1.312.288.8512 - HQ
+1.612.616.3106 - mobile

This message may contain confidential and/or privileged information. If
you
are not the addressee or authorized to receive this for the addressee,
you
must not use, copy, disclose, or take any action based on this message or
any information herein. If you have received this message in error,
please
advise the sender immediately by reply e-mail and delete this message.
Thank you for your cooperation.

Reply to this email directly or view it on GitHub<
https://github.com/taye/interact.js/issues/4#issuecomment-38479807>

.

Reply to this email directly or view it on GitHubhttps://github.com/taye/interact.js/issues/4#issuecomment-38670091
.

Cheers,

Leland Zaremba

31two Creative Studio
Principal Developer
+1.312.288.8512 - HQ
+1.612.616.3106 - mobile

This message may contain confidential and/or privileged information. If you
are not the addressee or authorized to receive this for the addressee, you
must not use, copy, disclose, or take any action based on this message or
any information herein. If you have received this message in error, please
advise the sender immediately by reply e-mail and delete this message.
Thank you for your cooperation.

@taye
Owner
taye commented Apr 3, 2014
@taye taye closed this in #5 Apr 9, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment