Animate a dashed line in Storyline with GSAP

This is the webobject code:

(function () {
// Function to load GSAP and Text Plugin
function loadGSAP() {
const gsapScript = document.createElement('script');
gsapScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js';
gsapScript.async = false;
document.head.appendChild(gsapScript);

const textPluginScript = document.createElement('script');
textPluginScript.src = 'https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/TextPlugin.min.js';
textPluginScript.async = false;
document.head.appendChild(textPluginScript);
}

// Call the function to load the libraries
loadGSAP();
})();

How do you register the DrawSVG plugin or other plugins not included using Storyline?

This code works perfectly, but I am also wondering the same thing as Rick. I have tried 

window.gsap = window.gsap || {}; // Avoid conflicts 
window.gsap.registerPlugin(TextPlugin); // Register TextPlugin

to register the text plugin, and it just throws me an error that TextPlugin is not defined

You can use GSAP plugins...but indeed need to register them. Think you can omit window...and using my favourite approach on loading external Javascript libraries by using a WebObject and a generic_javascript_functions file works best. 

Checking some old files...and the plugins do work... however some older setups do not work anymore mostly due to Articulate changing the HTML. Some elements have extra divs or spans and thus some selectors need fixing. Gonna share the setup in a minute.

The fact Articulate changes HTML structure internally for me is a real pain-in-the-ass. As a lot of old code doesnot work anymore and HTML elements i target cannot be found anymore. So cannot share it easily as i would have to refactor it. But you can simply use register and it works... when working with SVG however its more difficult as on the SVG-Dom quite some things changed recently in Storyline.

Hi Math, I've implemented the code, and it's functioning well. However, when we extend the duration, the animation slows down significantly. Is there a solution to maintain a fast-paced animation even with longer durations?

Math, can you get a little more specific, I would love to see a storyline file / web object. I have tried following your instructions but I have failed. 

Gsap as is, is included in Storyline so no need to add. I will share a sample on how to register plugins properly and work with that on our tutorial-app soon.

Thanks Math, I look forward to it!

Math, this is what I got. It's probably not the most efficient way, but it worked for me. What are your thoughts? I couldn't ever get the web object working. So this is just a javascript trigger.

const script1 = document.createElement('script');
script1.src = "https://cdn.jsdelivr.net/npm/gsap@3/dist/TextPlugin.min.js";
script1.async = false;

script1.onload = function() {
function animateText() {
const myText = document.querySelector('[data-acc-text="textIt"]');

// Set the initial font size and color:
myText.style.fontSize = "64px";
myText.style.color = "#007bff";

// Animate the text:
gsap.to(myText, {
duration: 2,
text: "This is the new text",
ease: "none"
});
}

animateText();
};

document.body.appendChild(script1);