Draggable joystick

[naxiya1778]

Hello, I'm using Draggable to be able to drag a map with the mouse, but what I'm looking for is to create a floating joystick (with buttons up, down, right and left), so when user press "up" it can simulate the dragging of the mouse up and so on. It's possible?

 

im just using this:

 

  Draggable.create("#map", {
      type:"x,y",
      bounds:"#wrapper",        
  });

 

Thank you :(

[ZachSaucier]

Hey naxiya1778 and welcome to the GreenSock forums. 

 

Draggable affects the x and y transform properties of the target(s), in this case your map. To add buttons that affect the same properties, you simply need to add click event listeners on the buttons and transform the same target(s) of your Draggable in whichever direction is appropriate. 

[naxiya1778]

Thankyou Zach :)

 

For example:

I have this button:

 

<span id="button-up"> UP </span>

 

and in JS:

 

document.getElementById("button-up").addEventListener("click", function(){

 

});

 

Wich event could be used inside de event listener to simulate de "X" up drag?

Can you help me?

 

With this in mind i can replicate to down, and "y" direction 😃

 

Thank you.

[ZachSaucier]

Well, it depends how you want it to work. Do you want the button to make the map go up at a set amount? At a set rate? Is the rate consistent? 

[naxiya1778]

Yes Zach, maybe the amount could be lower, and the rate constantly.. or if its so complicated, maybe when press, move up like 10% and other click, another 10%.. sorry about my english.

Thank a looooot.

[ZachSaucier]

Both of those are quite possible. To do a constant motion I would probably create a constant, repeating tween and kill it when the button is stopping being pressed. To do 10% each time I'd do a new animation each time. Which would you prefer?

[naxiya1778]

Oh! It would be perfect if it could keep the button pressed and it would advance 10% constantly motion.

[ZachSaucier]

Here's some untested code:

var btnUp = document.getElementById("button-up");
var tween;
btnUp.addEventListener("mousedown", function() {
  tween = gsap.to("#map", {
    yPercent: "-=10",
    duration: 1,
    repeat: -1,
    repeatRefresh: true
  });
});
btnUp.addEventListener("mouseup", function() {
  tween.kill();
});

 

[naxiya1778]

WOW! Thank you a lot Zach, it works perfectly!

Thanks thanks!! 😃😃

[naxiya1778]

Dear Zach,

One last question.

 

It works fine, but when dragging, the map travels more than it should and leaves a blank space, it is possible to limit it to a wrapper (in draggable i use this property:  bounds:"#wrapper" ) but in gsap.to  how can i fix this? 🤔

[ZachSaucier]

You can use the modifiers plugin to limit this. 

[naxiya1778]

Zach, im applying this:

 

var mapdrag = document.getElementById("map");

 

  tween = gsap.to("#map img", {
    y: "+=10",
    duration: 1,
    repeat: 0,
    repeatRefresh: true,
    modifiers: {
         y: gsap.utils.unitize( gsap.utils.wrap(0, (mapdrag.height)), "px") 
    }
  });

 

But it dissapear the map  

 

also  i tried : .startDrag() but it get stuck.

The maps is just an image, thats why i check the height.

 

without being able to achieve it

 

Another clue?

[ZachSaucier]

Please create a minimal demo if you'd like additional code help. It's hard to help in abstract.