Forum Discussion

Seb_Daubert's avatar
Seb_Daubert
Community Member
2 months ago

Try this:

let object1 = document.querySelector("[data-model-id='6ZrZMfnavnW']");
let button  = document.querySelector("[data-model-id='6fhUtThupA']");

// function called each tick while pressed
function moveStep() {
  gsap.set(object1, { x: "-=2" });  // move 2px per frame (adjust as desired)
}

button.addEventListener("mousedown", () => {
  gsap.ticker.add(moveStep);
});
button.addEventListener("mouseup", () => {
  gsap.ticker.remove(moveStep);
});
button.addEventListener("mouseleave", () => {
  gsap.ticker.remove(moveStep);
});

Dinesh2000's avatar
Dinesh2000
Community Member
2 months ago

1. Add Variables in Storyline:

  • MouseDown → type: True/False, default: False
  • MoveX → type: Number, default: 0

2. Use Triggers in Storyline:

  • Toggle  (MouseDown → True) and (MouseDown → False) when clicks an image or object

 

3.  Execute this Javascript when mousedown changes

  • function moveWhilePressed() {
      const player = GetPlayer();
      
      if (player.GetVar("MouseDown")) {
        const currentX = player.GetVar("MoveX");
        player.SetVar("MoveX", currentX +2);

        setTimeout(moveWhilePressed, 100);
        const objects = [
             object('  '), // give your object or image id here ""
         ];

         const positions = objects.map(obj => ({ x: obj.x}));


         objects.forEach((obj, i) => {
         obj.x = positions[i].x+currentX;
         });

         }
         }
    moveWhilePressed();
  • CajaPopularM704's avatar
    CajaPopularM704
    Community Member
    2 months ago

    This one almost works, but the problem is the Javascript is not recognizing the Mouse pressed, the first click done makes the image move, but even if I remove the press on the Mouse, the image keeps moving.

    I tried using the EventListener from the first comment, but is either ignored or the JS doesn't work. 

    I'm not sure if is the MouseDown variable that doesn't change when I click the button, or that the EventListener is not where it is supposed to be.

    Either way, I leave the code applied, the variable MouseDown is False when the state of the button is normal, and if the state is down, the variable is True.

    This the code until now:

    const button = object('5yfHufFxicy');

    function moveWhilePressed() {
      const player = GetPlayer();
      
      if (player.GetVar("MouseDown")) {
        const currentX = player.GetVar("MoveX");
        player.SetVar("MoveX", currentX +2);

        setTimeout(moveWhilePressed, 100);
        const objects = [
             object('6EPGwyDzEfX'),  ];

         const positions = objects.map(obj => ({ x: obj.x}));


         objects.forEach((obj, i) => {
         obj.x = positions[i].x+currentX;
         });

         }
         }
         
    moveWhilePressed();

    Thank you both for your help whether this works or not.