Smooth scrolling via a Key Down and Move interactions? Is slow and not smooth in this example

I’m trying to create a smooth scroll action using the left and right arrows on the attached example. Currently, the Key Down interactions trigger a Move action. The result is a slow and jerky animation, when what we really need is something that moves smoothly and stops fairly quickly when the key is let go.

Any ideas on other approaches for this?Scrolling Example.rp (594.7 KB)

The animation looks smooth to me (on Win10, Intel i7, latest Chrome browser). Any animations like this can vary depending on the system hardware and available resources, so a high-end gaming system will just do it better than a low-end tablet or notebook with crappy graphics card.

You can probably improve things by reducing the complexity of what needs to be moved. You have a group (Channel Canvas) of about 20 shapes, and each shape is in its own “group of one”. If you don’t need to change any of these dynamically, you could select the whole “Channel Canvas” group and convert it to a single image. To do this in Axure RP:

  • Select “Channel Canvas” by clicking on it (either on the page or in the OUTLINE pane) and copy it.
  • Right-click on the page background and choose “Paste Special > Paste as Image”
    • (If Axure throws a dialog warning image is large and might affect performance, choose to optimize it.)
  • You can either delete the “Channel Canvas” group, hide it, or move it out of view in its parent “Channel Waves” dynamic panel, if you need to preserve this “source group” (and edit it later)

There is a stutter initially in the animation, as the keyboard repeat has a delay (I think 1500 ms, determined by the OS and/or keyboard hardware.) This is same as if you press down on a character key when typing. Say you mash the ‘A’ key. You’ll initially see one ‘a’ then after about a second and a half, you’ll see a string of ‘aaaaaaaaaa…’ grow unil you release the key. Likewise if you then mash down the Backspace key–you’ll see the last ‘a’ disappear, a pause, then the rest of the 'a’s disappear quickly.

If this initial stutter is the “slow and jerky” part you’re trying to fix, you can try controlling it with a timer function. When a detected key is pressed down it can start this timer and when released it stops the timer. When the timer is running it can move things a little bit each time it loops. You can adjust the repeat delay and amount of movement (number of pixels in Move) to change the speed and smoothness. As Axure doesn’t have a built-in timer function or widget, you can build one yourself with a dynamic panel. I’ve found this method to be reliable in Axure. I’ve demonstrated this on Page 2 of this updated .rp file:
Scrolling Example.rp (1.4 MB)

Here’s how it works:

  • There is a dynamic panel named “Move Control”
    • It has two empty states. This is just so it can actually change states
    • I cut & pasted your Move statements from Page Key Down to its Panel State Changed event
    • When the value of OnLoadVariable equals “right” it moves ''Channel Canvas" to the right, and when value equals “left” it moves it to the left.
    • (You can use any global variable or the text on any widget in same manner)
  • The Page Key Down event tests if the key equals Right:
    • OnLoadVariable is set to value of “right”
    • “Move Control” is set to “Next, wrap, repeat every 25 ms”
  • Else if key down equals Left:
    • OnLoadVariable is set to value of “right”
    • “Move Control” is set to “Next, wrap, repeat every 25 ms”
  • The Page Key Up event tests if either Right or Left key has been released and
    • OnLoadVariable is set to value of “” (blank)
    • “Move Control” is set to “stop repeating”

On Page 3 I tried converting the Channel Canvas group to one image to see if that would help. I don’t notice any significant difference on my system, but yours may differ. I also added in an additional bit of logic for Page Key Down so the cases also test if OnLoadVariable is blank. This means they won’t repeatedly try to loop the “Move Control” dynamic panel function as the key is held down. It resulted in quicker stops, and on your system maybe also smoother movement animation.

From here you can try tweaking how many pixels to move and/or the duration of the move animation (i.e., “linear 25ms”) and/or the automatic loop delay (i.e., “repeat every 25 ms”). Matching the dynamic panel repeat value with the animation effect is probably best, but a slight overlap might help–if the animation duration is greater than the repeat delay. My thinking here is if the move takes 25 ms to animate linearly, but the “next move” gets triggered every 20 ms, then the movement would still be ongoing when the next move command occurs. I tried it out and didn’t notice any difference, but again, may or may not help on slower systems.