Forum Discussion

AsbjornReinhold's avatar
AsbjornReinhold
Community Member
3 months ago

Horizontal Scrolling Bar 2025 New Method

We have been waiting for 1,5 decade for a Horizontal scrolling bar. 😆


While we wait, here's a new method that doesn't involve grouping, rotating and all that janky jazz.

All you gotta do, is execute this JavaScript on a trigger when timeline starts.

const square1 = object('5cIKSnWwBvM');

update(() => {
square1.x = getVar('Slider1');
});

The object can be a picture, shape or a Group of many things.

After this, create a Slider. Set a positive start number and a negative End number - that makes sure the scrolling bar scroll the right way (create a text box with the Slider variable in it, to fine-tune the numbers you use, it will make sense what I mean when you open the example project).

I have added some shapes to create the illusion of it being inside a scrolling panel. Check the attached Storyline file for the codes and a visual example.

Up next for me is to style the scrolling bar and make a custom background for it, so it looks like a real panel.

Enjoy.

advice
e-learning development
storyline 360

5 Replies

  • SimonHouse-46f8's avatar
    SimonHouse-46f8
    Community Member
    2 months ago

    Thanks for sharing this. Unfortunately, I have no experience in JavaScript, but could the code be adapted to include vertical and horizontal scrolling in the same panel? eg for scrolling up/down, left/right with an large image of a webpage

    • AsbjornReinhold's avatar
      AsbjornReinhold
      Community Member
      8 hours ago

      You sure can! I haven't been able to respond sooner, as I didn't have an active subscription until now.

      I just added a new slider, and rotated it 90 degrees clockwise. That automatically created a new variable called Slider2.

      Then I copy/pasted the code from line 3,4 and 5 a bit further down the JavaScript Editor. I changed the "x" in the code to "y" and changed "Slider1" to "Slider2" to reference the new slider that I added to the project.

      Here you can see how it looks.

      I then naffed around with the numbers in the slider to make the y axis start where I wanted it to and make it move as much as I wanted it to.

      I've added the Storyline project file right here in this post for download.