Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
4 years ago

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

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...
storyline 360
ArtTiculate-f7c's avatar
ArtTiculate-f7c
Community Member
4 years ago

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);
welcomeTimeLine.play();

Mine is obviously hard-coded in this particular example.

ArtTiculate-f7c's avatar
ArtTiculate-f7c
Community Member
4 years ago

When I'm not hard coding, I use the following syntax:

let hostingBox = this.doc.querySelector(`[data-acc-text='${svgObjects[i].accBoxName}']`);

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    4 years ago

    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.