Forum Discussion

Azalenth's avatar
Azalenth
Community Member
2 months ago

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.

  • 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

    • Azalenth's avatar
      Azalenth
      Community Member

      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!


      • Nathan_Hilliard's avatar
        Nathan_Hilliard
        Community Member

        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.

    • Azalenth's avatar
      Azalenth
      Community Member

      Sorry was out sick yesterday so couldn't reply immediately. 
      No it doesn't. Does it take ages on your end?

  • 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.

    • Azalenth's avatar
      Azalenth
      Community Member

      Got you will cut it down to just 3-5 slides then will link it here. Give me a minute or so.

  • 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.

  • Azalenth's avatar
    Azalenth
    Community Member

    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. 

  • 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,
    Math