Articulate Storyline is a powerful tool for creating interactive eLearning courses, but sometimes you want to add a bit more flair or custom functionality. In this post, we’ll show you how to seamlessly integrate external JavaScript libraries and create a dynamic text animation effect that’s sure to grab your learners’ attention.
The Challenge: Customizing Text and Adding Animation
We often find ourselves wanting more control over text appearance and behavior within Storyline. This is particularly true when trying to implement unique animations or leverage advanced styling features that aren’t natively available.
The Solution: SplitType.js and GSAP
To tackle this, we’ll be using two incredible libraries:
- SplitType.js: This library makes it super easy to split text (words, characters, etc.) into individual elements. This opens up a world of possibilities for styling and animating each piece separately.
- GSAP (GreenSock Animation Platform): This high-performance animation library gives us the power to smoothly and flexibly control how elements move, change size, fade, and do all sorts of visual magic. The good news is Articulate has already included it in Storyline, so we’re ready to go!
Let’s Get Our Hands Dirty: The Code
First things first, add this snippet of code to your Storyline project:
const script1 = document.createElement('script');
script1.src = "https://unpkg.com/split-type";
script1.async = false;
script1.onload = function() {
//All our code will go below this but above the bracket and appendChild code.
};
document.body.appendChild(script1);
That wasn’t so bad, right? This sets up the SplitType library. You can now use this split-type package anywhere in your project. But let’s put something in there for this slide. We will put all our code below the comment //All our code will go below this but above the bracket and appendChild code. Chris Hodgson describes the nitty gritty of how to include external JavaScript in his video.
Prepare Your Storyline Elements
- Create a Text Box and Button: Make sure the button has no states.
- Set Accessibility Text: Right-click on the text box, go to “Accessibility,” and give it the alternate name “heading4.” Do the same for the button, giving it the alternate name “button4.”
The Code
let splitHeading4;
let animationTimeline;
// Function to replace the text and apply formatting
function replaceAndFormatText() {
const heading4 = document.querySelector('[data-acc-text="heading4"]');
if (!heading4) return;
// Replace the text here and remove non-spacebar spaces
let customText = "Your custom text here";
customText = customText.replace(/\s+/g, ' ').trim();
heading4.textContent = customText;
// Capture original styles
const computedStyle = window.getComputedStyle(heading4);
// Split the text
splitHeading4 = new SplitType(heading4, {
types: 'chars',
charClass: 'split-char'
});
// Preserve original layout
heading4.style.display = 'inline-block';
heading4.style.whiteSpace = 'nowrap';
// Apply styles to split characters
splitHeading4.chars.forEach(char => {
char.style.display = 'inline-block';
char.style.fontSize = '28pt'; // Set font size explicitly
char.style.color = 'black'; // Set color explicitly
char.style.fontFamily = computedStyle.fontFamily;
char.style.fontWeight = computedStyle.fontWeight;
char.style.position = 'relative'; // For animation
});
// Remove any extra spacing SplitType might have added
heading4.style.letterSpacing = '-3px';
heading4.style.wordSpacing = '10px';
}
// Function to animate heading 4 Elastic Stretch
function animateHeading4() {
if (!splitHeading4) return;
// If there's an ongoing animation, complete it immediately
if (animationTimeline && animationTimeline.isActive()) {
animationTimeline.kill();
}
// Reset the scale of all characters
gsap.set(splitHeading4.chars, { scaleX: 1, scaleY: 1 });
Let’s break this code segment into digestible parts:
Variables and Functions:
splitHeading4: This variable is declared but hasn’t been assigned a value yet. It’s a placeholder to store the result of splitting our heading text into individual characters later on.animationTimeline: Similar tosplitHeading4, this is an empty variable. It will eventually hold a GSAP timeline object that orchestrates the animation sequence.
We have two main functions here:
replaceAndFormatText(): prepares the animation by locating the heading text in Storyline, replacing the text, cleaning up spacing, and saving the original styling.
animateHeading4(): ensures the split text is ready to animate by checking if it’s been split and stopping any current animation. It then resets the characters to their original size before the animation begins.
Note: GSAP and Storyline text do not play well with each other and you can’t inherit the Storyline formatting so you have to format it yourself. No matter how I tried I couldn’t get center to center consistently. If you want to center it and have a button it won’t work. But you can center it if you aren’t using a button. Also for some reason the kerning got all wacked up so I had to adjust the letterspacing and wordspacing manually.
// Create a new timeline for this animation
animationTimeline = gsap.timeline();
animationTimeline.from(splitHeading4.chars, {
duration: 1,
scaleX: 2,
scaleY: 0.5,
ease: "elastic.out(1, 0.5)",
//stagger: 0.02
});
}
This code creates a new GSAP animation timeline and defines an animation that will stretch each character in the “splitHeading4” text horizontally to twice its width (scaleX: 2) and compress it vertically to half its height (scaleY: 0.5) over a duration of one second. The animation uses an “elastic out” easing, giving it a springy, bouncing effect. The //stagger: 0.02 line is commented out, but if uncommented, it would introduce a slight delay between the start of each character’s animation.
// Replace the text and apply formatting immediately when the script loads
replaceAndFormatText();
// Get the button elements
const button4 = document.querySelector('[data-acc-text="button4"]');
// Add event listeners to the buttons
if (button4) {
button4.addEventListener('click', animateHeading4);
}
The function replaceAndFormatText() gets called here before any animation happens.
Button Identification: The code finds the button element in your Storyline project with the accessibility text “button4”. It assigns this button to the variable button4.
Event Listener Attachment: If the button is found (the if statement checks for this), an event listener is added to the button. This listener waits for a “click” event on the button. When the button is clicked, it triggers the animateHeading4() function, initiating the text animation.
And there you have it! With a sprinkle of JavaScript and the combined power of SplitType.js and GSAP, you’ve unleashed a whole new level of text animation magic in your Articulate Storyline projects. Feel free to experiment with different effects, easing styles, and timings to make these animations truly your own. And remember, this is just the beginning – once you’ve mastered this technique, you can explore even more advanced JavaScript libraries and techniques to create even more impressive eLearning experiences. The only limit is your imagination!
Please watch the video below:
