A Way to Do Animations?

[rpan001]

Hello all,
I'm currently trying to implement animations into my experiment, but have run into a issue. So far, I've made my own plugin to be able to display two images at once with a fixation cross in the center (example in the video attached). Now, I'm stuck with figuring out what to do to make those images do a little animation (along with a short sound-byte) after the participant presses a button.

One path I've considered is making another plugin (i.e. modifying my current plugin) to be able to replace the images with videos of the images in animation. Another path I've considered is adding code to my plugin to be able to do animations, but I'm unsure of how to go about doing that. I've seen that you can animate a canvas to do animations and I've drawn the images into a single canvas, but I'm not sure how to implement that into a plugin.

Any help is appreciated. Thanks.

*Note: I'm using a mixture of PsychTestR and jspsych, although most of the code/work is done with jspsych. PsychTestR is being used to organize different pages.

Mozilla.Firefox.2021-04-15.19-56-44.mp4

[SHogenboom]

What type of animations are you looking for? I'm currently working on a custom plugin where a word "falls" down the screen. I achieved that by re-drawing the word on the canvas with a setInterval where I update the y-coordinates where the word is drawn. You could do something like that which is triggered only after the response is provided?

Example code (for as much as it can help):

// ANIMATE TARGET
    // Using the setInterval time ensure that the included code is executed sequentially
    /// With the dropspeed intervals
    var animate_target = setInterval(function () {
      // UPDATE TEXT
      show_target(
        // posX is constant = centralized
        trial.canvas_size_target[1] / 2,
        // posY updated with step_size
        posY
      );

      // UPDATE posY
      posY += step_size;
      // Check if target has reached the bottom
      if (posY >= trial.canvas_size_target[0]) {
        // Cancel all intervals that are still ongoing
        clearInterval(animate_target);

        // Finish the trial
        end_trial();
      }
    }, trial.dropspeed);