Change color on a SVG with GSAP in Storyline ( part 2 )

Nov 27, 2022

To create a dynamic advanced progress meter you need to be able to change color and settings of default Storyline shapes / SVGs.

Here i am showing how to get that done. A function in Javascript enables you to get any SVG and edit its settings with GSAP. There are some caveats, but showing and explaining those in a next step.

function selectSVGelement(actual_accName){
  var element2Animate = document.querySelector("[data-acc-text='"+actual_accName+"']");
  var obj2Animate1 = document.querySelector("[data-acc-text='"+actual_accName+"']");
  var chromeLines1 = document.querySelector("[data-acc-text='"+actual_accName+"'] > div");
  var isObjGroup = document.querySelector("[data-acc-text='"+actual_accName+"'] > div");

        svgElement1 = document.querySelector("[data-acc-text='"+actual_accName+"'] > div > svg > g > path");
        svg2Animate1 = document.querySelector("#";
        console.log("svg2Animate1: ";,  {duration:2, strokeWidth:8, stroke: "#984807" ,fill:"#E46C0A"});


What it does is, get the id of the SVG element, as you cannot target it properly in any other way. And then with GSAP you can change all values.

The Storyline added too.

9 Replies
Art Ticulate

Here's a copy of some of my code that follows a very similar path to yours:

let welcomeTimeLine = gsap.timeline({paused: true});
let storylineText = this.doc.querySelectorAll("[data-acc-text='storylineTxt']");
let storylineIcon = this.doc.querySelectorAll("[data-acc-text='storylineIcon']");
let firebaseText = this.doc.querySelectorAll("[data-acc-text='firebaseTxt']");
let firebaseLogo = this.doc.querySelectorAll("[data-acc-text='firebaseLogo']");
let plusIcon = this.doc.querySelectorAll("[data-acc-text='plusIcon']");
welcomeTimeLine.from(storylineText, {x: -100, alpha: 0, duration: 1}, .5);
welcomeTimeLine.fromTo(storylineIcon, {alpha: 0}, {alpha: 1, duration: 1}, .5);
welcomeTimeLine.from(firebaseText, {x: 500, alpha: 0, duration: 1}, 1);
welcomeTimeLine.fromTo(firebaseLogo, {alpha: 0}, {alpha: 1, duration: 1}, 1);
welcomeTimeLine.fromTo(plusIcon, {alpha: 0}, {alpha: 1, duration: .5}, 1.25);;

Mine is obviously hard-coded in this particular example.

Math Notermans

Nice Steve, obvious jQuery required to work like this. But as Damien on LinkedIn correctly noted... what if you cannot customize accessibility names... gonna share my workflow for that too soon. I use the console to check how Storyline publishes specific types and figure out what the selector is. A few things noticing in SVG in Storyline. Default Storyline icons can be grouped SVGs, so you need an extra loop to change them, and importing AI-SVG changes the SVG to SVGimage so you cannot change them anymore in SL. When you copy/paste them directly from Illustrator they get added as .emf and keep the vector information and can be edited.

Math Notermans

When doing anything in Storyline, in this case adding a text.... or the setup of your SVG element as is is different, you would need to check in the console whether Storyline on publish does something with it. Can be an extra span or an extra div, but thats what you have to take into account when doing these kind of things.