Forum Discussion
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
- PhilMayorSuper Hero
I love this, thanks for sharing, I added it to my snippets
- ThierryEMMANUELCommunity Member
Added to my toolbox too. Thanks for sharing.
Hi AsbjornReinhold​! Our team was really impressed with this build! We've included it in our list of Storyline 360: JavaScript Tips and Examples
Thank you for posting this!
- SimonHouse-46f8Community Member
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
- AsbjornReinholdCommunity 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.
- RichardSlateCommunity 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!- PhilMayorSuper Hero
Or you can right click the object on the stage and copy the object ID.
- RichardSlateCommunity Member
Geez, when did that happen!? Didn't know about right-clicking the object on the stage.
Thanks Phil! I'll amend my post.
Related Content
- 5 years ago
- 9 months ago
- 5 months ago
- 6 months ago