Forum Discussion

AsbjornReinhold's avatar
AsbjornReinhold
Community Member
4 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.

9 Replies

  • 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

      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.

       

  • RichardSlate's avatar
    RichardSlate
    Community Member

    To make Asbjorn's code work, you need to change the ID of the object in Asbjorn's code to the ID of the object you wish to scroll on your stage. 
    I had a big long post about how to get an object ID in the code inspector here.  It's gone now because Phil has a much easier way. See his reply. If you get it working and you want to open up the javascript/Storyline world, search "Storyline and GSAP."  It can do wonderful things.  It can also be frustrating to use it correctly, but it's well worth it! 

    • PhilMayor's avatar
      PhilMayor
      Super Hero

      Or you can right click the object on the stage and copy the object ID. 

      • RichardSlate's avatar
        RichardSlate
        Community Member

        Geez, when did that happen!?  Didn't know about right-clicking the object on the stage.
        Thanks Phil!  I'll amend my post.