How to Add a Rainbow Gradient to Text in Articulate Storyline Using JavaScript

natestoker 12 September 2024 JavaScript or Logic

Add a splash of color to your Articulate Storyline e-learning courses with a stunning rainbow gradient text effect using JavaScript. Whether you’re designing an inclusive Pride-themed lesson or simply want to wow learners, this tutorial shows how to use JavaScript triggers to dynamically apply a multi-color gradient to text elements.

🌈 Why Use a Gradient in Storyline?

A rainbow gradient not only enhances visual appeal, but also signals creativity, inclusion, and polish in your course design. Since Articulate Storyline doesn’t offer native gradient text styling, this workaround empowers you to elevate your visuals using SVG manipulation and JavaScript.

💻 The JavaScript Trigger to Apply Gradient Text

function logFontInfoAndPosition(dataModelId) {
var divs = document.querySelectorAll('div');
var targetDiv = null;
for (let div of divs) {
if (div.getAttribute('data-model-id') === dataModelId) {
targetDiv = div;
break;
}
}

if (!targetDiv) {
console.error(`Div with data-model-id '${dataModelId}' not found.`);
return;
}

let svg = targetDiv.querySelector('svg');
let textElement = svg.querySelector('text');

if (!svg || !textElement) {
console.error(`SVG or text element not found in the target div.`);
return;
}

let defs = svg.querySelector('defs') || document.createElementNS('http://www.w3.org/2000/svg', 'defs');
let linearGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
linearGradient.id = 'gradient';
linearGradient.setAttribute('x1', '0%');
linearGradient.setAttribute('y1', '22%');
linearGradient.setAttribute('x2', '0%');
linearGradient.setAttribute('y2', '82%');

linearGradient.innerHTML = `
<stop offset="0%" stop-color="#5461c8"/>
<stop offset="16.67%" stop-color="#5461c8"/>
<stop offset="16.67%" stop-color="#c724b1"/>
<stop offset="33.34%" stop-color="#c724b1"/>
<stop offset="33.34%" stop-color="#e4002b"/>
<stop offset="50%" stop-color="#e4002b"/>
<stop offset="50%" stop-color="#ff6900"/>
<stop offset="66.67%" stop-color="#ff6900"/>
<stop offset="66.67%" stop-color="#f6be00"/>
<stop offset="83.34%" stop-color="#f6be00"/>
<stop offset="83.34%" stop-color="#97d700"/>
<stop offset="100%" stop-color="#97d700"/>
`;

defs.appendChild(linearGradient);
svg.appendChild(defs);
textElement.style.fill = `url(#gradient)`;
targetDiv.style.zIndex = '9999';
}

// Example usage
logFontInfoAndPosition('6hfJN5zz7qg');

🔧 Step-by-Step Setup in Storyline

1. Find Your data-model-id

Just right-click your textbox in the Storyline preview and click the code shown—it’s automatically copied to your clipboard.

getDataIdOfElement("PRIDE");

2. Add the Trigger in Storyline

  • Go to Triggers.

  • Create a new trigger with the action Execute JavaScript.

  • Paste the full JavaScript code above.

  • Set the trigger to run when the timeline starts.

🎨 Gradient Styling Explained

The key styling section is this part:

linearGradient.setAttribute('y1', '22%');

linearGradient.setAttribute(‘y2’, ‘82%’);

Why 22% to 82% instead of 0% to 100%? It aligns the gradient more naturally to the visual height of most fonts in Storyline’s SVG rendering. You can tweak these values to better match your text design.

The stops create hard color transitions to give it a more retro-rainbow effect. You can easily soften the gradient or change colors to match your theme.

⚠️ Key Considerations

  • ✅ Works best on single-line text

  • ✅ The text must be inside an SVG

  • ❌ Won’t work on grouped shapes or multi-line text without adjustment

  • 🌐 Test in Chrome, Edge, and Firefox for full compatibility

  • 🧠 Keep accessibility in mind—consider high contrast and alt text

🚀 Bonus Enhancements

  • Animate it! Add subtle movement with CSS or GSAP.

  • Trigger on Interaction: Let the rainbow appear on click or hover.

  • Create Variations: Use gradients for alerts, correct answers, or badges.

🏁 Final Thoughts

Adding a rainbow gradient to text in Articulate Storyline is a bold way to stand out and show your design expertise. This tutorial gives you full control through JavaScript, unlocking styling possibilities not available through the native editor.

Experiment. Play. Celebrate diversity and inclusion through color.

Related Posts