Jump to content
Search Community

How to create a mouse follow and draggable function like this

Yashi 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

The theory is not that complicated.

 

You'll need an element (the trailing circle) that also holds the scrollable element inside it. Then, just listen to a mouse down event, stop the trailing, hide the initial element, show the hidden one and start dragging something.

 

As this is a GSAP forums, I went and made sure we're using GSAP's tools, of course. :)

 

Here's a very crude implementation that I may or may not improve later. All of the extra sugar is on you. ;)

 

See the Pen dbabc4f3257ca7ea704bfee0f6adb9b8 by dipscom (@dipscom) on CodePen

 

 

Happy tweening!

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

Thank You for this simple example.. i did the mouse follow thing. its simple. but i was trying to break that mouse follow event and activate draggable event. and again after mouse release reactivate mouse follow thing. this will help me a lot. thanks again.

Link to comment
Share on other sites

sorry to bother u again.. i have a problem with this drag scenario. i'll list them,

 

1) able to trigger normal browser click event. this can be done by using setTimeout and delay the mouse event inside onMouseDown() function. so its act like hold to reveal drag controllers  and targeting left click only( e.which === 1). but in this scenario. i cant revert single click and rightclick events back to browser defaults.. if i change trail css and add pointer-events to none. then all these are work fine but cant grab the drag handler, because of this pointer-events none.

 

2) while we are on drag i need to store the current state. 

 

See the Pen VrZBPG by yashi (@yashi) on CodePen

 

Link to comment
Share on other sites

Hey @Yashi,

 

Why do you need to set pointer events to none? I don't understand.

 

If what you are trying to do is to be able to click on something else as well as drag your point then you need to be able to differentiate between what you are doing (click, mouse down, mouse up) and who you are clicking, if it is your document or a button (and then, which button). I'll try to get an example going at some point but let me know if you work something out yourself.

 

A cheap way to solve your issue, is to put the pointer-events back to auto as soon as you click. But that isn't really what you should be doing (setting pointer events to none).

 

doc.on("mousedown touchstart", trail, function(e) {
  trail.css("pointer-events", "none");
  if (e.which == 1) {
   ...
 }
   ...
}

 

As for your second question. Current state of what? And What state is it that you are trying to store?

Link to comment
Share on other sites

@Dipscom Thank you for your feedback., and long story short

 

i want my cursor to behave like normal cursor. and able to click any links and other element like normal. but if i click and hold anywhere within the document Body. then this draggable needs to to be activated and once i do drag the slide and release the cursor. cursor should have default behavior back. like normal one and be able to click any html element

 

its just a simple and normal cursor, the only difference thing is if i click and hold. this draggable controller will comes up.

 

ISSUE - now click and hold work well but i can't click any document links or buttons also no rightclick contextmenu. please check this updated codepen demo (previous one i missed to include draggable cdn link)

 

See the Pen VrZBPG by yashi (@yashi) on CodePen

 

 

02) Store state mean. this feature already work well.

       ISSUE - but once i click and hold and do the drag. second time. i couldn't grab the handler. please check my comment line inside the js panel  (remove clearProps)

 

 

I hope this will help you to understand my issue. 

 

 

Link to comment
Share on other sites

On that site there is brief moment where a video plays, and if you right click it shows you videos context menu. So I guess they are setting pointer events to none and are using mouse events on window. Because it is active on entire page anyway.

 

So you can set pointer events to none on cursor and use mousedown, touchstart event of window. Right now on mobile so can't test it but I guess this is how it can be achieved.

Link to comment
Share on other sites

Hello @Yashi

 

I've spent some time on this issue - still a crude implementation at the moment but it should be enough for educational purposes. I'm going to have a really busy week so, I might not have much time to polish this but I might come back later to make this smoother and add some extra visual sugar.

 

I know see the reason you were using pointer-events. It could be used in this situation to control who's responding to the mouse and who shouldn't but I think it ends up adding unnecessary complexity.

 

A simple solution to get around your clicking of buttons is to simply add a tiny bit of customised z-index. Here's MDN's documentation on the z-index property. Be sure to read it and the relevant links in it if you are not familiar with it.

 

See if the bellow helps you:

 

See the Pen 34c4056ed8cb8ca8fd4def6b544c106c by dipscom (@dipscom) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Hi @Dipscom thank you for your feedback.

 

i'm also trying various things to figure that out. but i found a little trick but it involve another library. so this thing might not suitable but .. check this out.. its call http://interactjs.io/ .. they have hold event separate and the best part is with that. we don't have any issue related to pointer event. and pointer behave like normal cursor. with every default behavior like right click, context menu, single click. but still i'm trying to implement same thing with it.. 

 

i'm going to implement this feature on my ongoing project that's why i'm so eager to learn this.  it would be great if someone can back me up. because i'm new to these kind of feature implementation. 

 

check this website.. they also have implement this kind of thing..

 

http://www.refletcommunication.com/en

 

 

@Carl @OSUblake @PointC any thoughts about how to implement these kind of feature without involve another library 

Link to comment
Share on other sites

Here's how to use Pointer Events. Very important as IE/Edge doesn't use touch events, and Chrome now uses Pointer Events.

https://developers.google.com/web/fundamentals/design-and-ux/input/touch/

 

22 hours ago, Yashi said:

check this website.. they also have implement this kind of thing..

 

http://www.refletcommunication.com/en

 

I don't have time to make a demo right now, but it looks like all they do is some layering. The very top layer has text which can be selected. The layer with the slider thingy is below that, which has a fixed position. 

 

I see no need to really use Draggable for that slider. That site is just moving the slider based on how far left or right you move while the pointer is down as some percentage of the screen width.

  • Like 2
Link to comment
Share on other sites

@OSUblake thank you for your feedback and i'll give a try based on your feedback.. and see if it work for me  i'll post it here.. and i found couple of good websites and they use this kind of feature to their website. i'm thinking  that i'm doing something wrong here.. i might need to think this another perspective and do something.. i'll give a try.. and if u all have time to make a demo. please post it here.. thank you all.

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