Forum Discussion
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 luck here in the e-learning heroes forums.
This is my issue
https://gsap.com/community/forums/topic/42498-gsap-articulate-storyline-360-restart-course-bug
If anyone is knowledgable with GSAP and JS in general that could help. It would be really appreciated. Any input is welcome.
Thank you!
P.S. MathNotermans-9 if you can read this, I wanted to PM you specifically to inquire about this issue since I've seen your posts on JS and all that. But I can't find a PM function, so was hoping you can see this message and reach out hopefully.
Can you limit the Storyline so its smaller and publishes faster to just showing the issue? Or make a simple dummy without much content... 2, 3 slides should suffice. As is this is far too big for me to publish and debug... my time is limited alas.
Got you will cut it down to just 3-5 slides then will link it here. Give me a minute or so.
Here you go! Squeezed it into just 6 slides and 11.5mb.
At Slide 6 it is set to reset the progress bar.
https://www.mediafire.com/file/jr85oyqx933frn3/SAB_BoardEffectiveness_cut.story/file
It also perfectly replicates the issue. Once you restart the course, check the console logs and it still keeps resetting the progress bar and assumes I'm still at the last slide.
Thank you again for your time and patience.
Basically Storyline is not aware of anything you do with Javascript and/or GSAP. So several options to work around that. Using Storyline variables to store state of SL is the easiest, and then use that. If you share a Storyline file i can check ( when time permits ).
Kind regards,
MathHey! I appreciate you reaching out.
https://www.mediafire.com/file/137x10kzkbhbuow/SAB_BoardEffectiveness.story/file
Here's the Story file. Let me know what else I need to provide. Thanks!
Just a bit of an update. I've tried applying the progress bar and the same code on a fresh 5 slide storyline file and it works fine there. (although there is an issue once you restart the course, arrive at slide 1, then press previous button, it goes back to slide 5, then when you press back again, upon reaching slide 4 you'll see the progress bar resumes from before and is not reset, not sure why that is)
https://www.mediafire.com/file/mhnmgdsdp1cdnru/Untitled1.zip/file
Either way I'm still not sure why it won't work on our main file.This is your published folder. If you want me to check the issue i need a .story file with the issue clearly showing. No need for a complete project...just a few slides and a clear description what is expected, and whats wrong.
I already sent the SL file in my previous comment here.
GSAP Articulate Storyline 360 Restart Issue | Articulate - Community
As for what we're expecting, basically for the gsap progress bar to reset when it reaches the last slide (slide 36 in this case) and once we hit the restart course button, it resumes its functionality and functions the way it should normally when starting the course. (This is evident in my untitled1.zip file that I also linked, which uses the same code but with Slide 5 as the reset slide).
Without all the reset features we added in the code, GSAP wont reset at all. That is why we added those in.
But after testing, it just resets then disables the progress bar when reaching Slide 36, and when we restart the course it(GSAP) won't function anymore. Console logs also keep reporting that we're still on Slide 36 even when we're not, this is not the case though on our untitled1.zip file.
Does publishing this take ages on your end too ?
Sorry was out sick yesterday so couldn't reply immediately.
No it doesn't. Does it take ages on your end?
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.
