Forum Discussion
An Easy-to-Use Animated Menu Using GSAP
Hey this is really cool! Your example works well (I opened it in Storyline, I could preview the interaction, etc.), but I am really struggling to get mine to work and I feel like I might be missing something.
This is a very crude quick example (forgive my silly vegetables, it's just to entertain myself while I figure it out.) I was trying to do one with 4 objects.
When I go to preview, the JS seems to load (I did a first loading slide like yours) but then with the menu slide, the interaction doesn't appear.
My pngs, the shape are labeled in accessibility, then all grouped and that's labeled as well.
Used the name of the web object folder is the portion of the URL between “WebObjects/” and “/index.html” to do that bit.
I'm not sure what I'm missing or if there is a setting or something that's breaking things. I would be forever grateful for any insights because I feel like I am losing my mind and I bet I will feel really dumb regarding whatever the solution is.
Thanks for the note about this Jenni. In your project, the main issue is that you have a Storyline variable named zindexFactorTo that should be zIndexFactorTo (with a capital I in Index). That will allow it to run in Review 360.
Another issue is that you are publishing to LMS. I don't do this very much, and have not really tested things vey well using SCORM. The web object script loading method was a borrowed approach that I probably have never published to SCORM. The final package seems to move the web object in the path so the script doesn't find it, so the GSAP plugin ends up missing.
Since we just need to load the single script, we can just do that directly from a website instead, doing away with the need for the web object and its related variables and scripts. They can be removed from your project. Instead of the loading script on the Slide Master, replace it with the following.
Copy this script and paste it over the current contents of the first JavaScript trigger on the Slide Master:
let script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/MotionPathPlugin.min.js");
script.onload = function() {
gsap.registerPlugin(MotionPathPlugin);
//will only run this loader when javascriptsLoaded == false
player.SetVar("javascriptsLoaded", true);
}
document.head.appendChild(script);
This just loads the GSAP MotionPath plugin from an online code repository, so it should be reliably available. The version is fixed, so if it works when you publish, it should continue to work the same in the future.
Changing the zIndexFactorTo variable name and switching to this updated script should allow your project to run. I tried it both from a local file directory, and as a SCORM package uploaded to a Moodle site. They both displayed a working menu.
I will have to look more at the current SCORM publishing format and update the web object loading script for the future.
Thank you so much for the help and clarity! That makes a lot more sense. I will be having a fun Sunday testing this out. 😊 Thanks again, really appreciative.