Forum Discussion
Progress Bar in Storyline
Hi all,
I have built this progress bar from an online tutorial (see attachment) that works with javascript.
Now, this all works just fine but I want to add something a bit extra to it...
If you go to the slide master and the very first slide, there is a bit of javascript that controls this so that the progress bar's horizontal length increases bit by bit as you go through the slides. If you preview the entire project and keep clicking the next button, its length jumps up instantly bit by bit. (this is the green bar at the top).
I want to add some extra GSAP, javascript functionality to the main code so that if you go to the next slide it gradually increases with an easing effect to it's new length.
I have built a "simulation" of this on slides 1 and 2, where I have a red bar gradually increasing using Storyline's own animation capabilities.
Any ideas would be greatly appreciated!
Thanks in advance!
Look at this modification to your project. I added one variable to SL and modified the script on your master slide. You script is disabled. There are two alternatives.
The one after yours (also disabled) just adds the missing lines to your script that animates the bar between slides. It also comments out the lines that do not apply to this project.
The last script (active) updates the code a bit to use the new JS API which is better for identifying slide objects than the accessibility text, and to eliminate the two extra variables you adjust on the master slide (optional).
The end result for either is that the bar animates smoothly between positions, even if you jump between slides using the side menu, forward or backward.
https://360.articulate.com/review/content/296ca509-c227-4224-a516-b4534490b785/review
1 Reply
Look at this modification to your project. I added one variable to SL and modified the script on your master slide. You script is disabled. There are two alternatives.
The one after yours (also disabled) just adds the missing lines to your script that animates the bar between slides. It also comments out the lines that do not apply to this project.
The last script (active) updates the code a bit to use the new JS API which is better for identifying slide objects than the accessibility text, and to eliminate the two extra variables you adjust on the master slide (optional).
The end result for either is that the bar animates smoothly between positions, even if you jump between slides using the side menu, forward or backward.
https://360.articulate.com/review/content/296ca509-c227-4224-a516-b4534490b785/review