GSAP Articulate Storyline 360 Restart Issue
Greetings. I've posted my issue on the GSAP forums. But upon looking through there it seems there's only a handful of people who can relate with Articulate Storyline 360. So I decided to try my l...
Forum Discussion
I took a quicklook at your file. If I understand your question, you want the progress bar to respond to moving backwards through the slides as well as forward, and you want it to reset when you click Home to return to the intro slide.
Some issues I see:
First, on the master slide, SL_currentslide should probably be set to Project.SlideNumber instead of Project.SlidesViewed
Next, in the script on that same slide, in the updateSVGRectangle function:
Under if (isSlideExcluded(JS_currentSlide)) and if (currentProgress < maxProgress):
You reset currentProgress to maxProgress. Try commenting these out.
Since you reset currentProgress whenever it decreases, your progress bar never goes down.
Changing these 3 things causes your progress bar to track forward and backward, and reset when you click Home.
Finally, the only other issue is the backward animation. You're using gsap.fromTo(), so the bar is starting at the previously higher value and then decreasing. That may be fine to indicate that your going backward. If you don't want that, you will need to modify the animation function or logic to suit your needs.
A simple solution would be, at the end of the updateSVGRectangle function, to set SL_lastProgress to currentProgress instead of maxProgress. This way, the previous progress variable points to the last slide you visited, and you can animate from there.
That may or may not work for the rest of your needs.
I have attached a .story file with all of the above modifications (marked with a string of asterisks in the script).
Demo: https://360.articulate.com/review/content/db892958-dc47-450b-8a69-58e77017b0b7/review
Hello Nathan,
Thanks for your response. Unfortunately, the progress bar being persistent is intentional. That is not our issue. The progress bar as it is in the Story file is what we want it to be.
The only issue is when reaching the last slide, you hit the "Restart Course" button. And it should also reinitialize or restart the progress bar, which it does(given our efforts on the code) but it won't function anymore(check console logs) after the course is restarted. We want the progress bar to function again when the course is restarted.
Let me know your thoughts on the matter. Thanks!OK. I played with your 6 slide example. Consider these...
- Your SL_currentslide variable is set to SlidesViewed instead of SlideNumber, so it never goes below the max. Because of this, the progress bar is not shown on restart because it is being reset on each new slide vist (as indicated in the inspector). Changing it to Project.SlideNumber makes the progress bar work after restart.
- Your call to gsap.revert()
- I believe revert() is only a function for an instance of a timeline, not just gsap in general. This is causing an error. I tried commenting it out.
- You try to set SL_currentProgress in the resetProgressBar function. There is no such variable. I tried commenting it out.
- You call for the progress bar reset on slide 6, but in your slide structure, 6 is the second to last slide (5 is the last). As such, the second to last slide has no progress bar shown since it is being reset. Chaging the check to slide 5 shows the bar on the second to last slide (6), but moves the progress bar to position 6. You may need to reorder/restructure your slides to be in numeric order.
I tried these changes in your 6 slide example and it seemed to work, with the caveats described. These may be of some help.
Hello again Nathan!
Glad to let you know that this fixed the issue with the progress bar not resetting properly on restart course.
I understand why we needed to use SlideNumber instead of SlidesViewed.
But the main module we're working on requires us to use SlidesViewed (as we track their progress via the progress bar based on all slides viewed).
So returning it back to SlideNumber would void all our progress thus far. Can you suggest a solution we could work around that would make it so we can use SlidesViewed and have the progress bar also functional on restart? Or maybe an alternative?
Thank you again for your time and patience.
