Create a Progress Bar in Storyline 360 with Javascript & GSAP
In this video tutorial, we will explore how to make a progress bar in Articulate Storyline 360.
Our progress bar will update when we move back and forward through our slides. And, no matter how many slides we have in our project, our progress bar will scale and display the progress accurately.
The progress bar uses Javascript (GSAP) to animate the shape and makes use of the built-in Storyline variables showing the slide number in the project (Project.SlideNumber) or the slide number in the scene (Scene.SlideNumber).
We will also be able to make individual progress bar for each of our scenes, which will display only how we progress through the slides of that certain scene.
___________
CHAPTERS:
00:00 Intro
00:50 Create the progress bar
12:14 Final result for project progress bar
13:35 Individual progress bars for scenes
___________
Code available here: https://learnomancer.com/posts/dynami...
#articulatestoryline #gsap #javascript #storyline #storyline360 #instructionaldesign #elearning #elearningdevelopment
Watch video Create a Progress Bar in Storyline 360 with Javascript & GSAP online without registration, duration hours minute second in high quality. This video was added by user Learnomancer 18 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 749 once and liked it 19 people.