Forum Discussion

CajaPopularM704's avatar
CajaPopularM704
Community Member
2 months ago

Gsap Mouse Down animation

Hello everyone,

I am currently working on a little game where the character used must walk, so I've been trying to use GSAP to make it work, the interaction is simple:

While the button is pressed, the character moves to the left, it already worked when is a simple click on the button, it moved a certain distance in a certain amount of time, now I want it to move while the button is pressed. Here is the code...

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

button.addEventListener("mousedown", ()=>{

gsap.to(object1, { x: "20",
ease: power1.inOut
 });
});

If anyone could help, I would be very grateful, and it could be useful for somebody else another time.

 

advice
Articulate 360
community
e-learning development
other
storyline 360

3 Replies

  • 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
        29 days 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.

Related Content