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("#"+svgElement1.id); console.log("svg2Animate1: "+svgElement1.id); gsap.to(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
I like what you did with this line of code, Math:
svgElement1 = document.querySelector("[data-acc-text='"+actual_accName+"'] > div > svg > g > path");Wherever did you get the syntax for that?
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.
When I'm not hard coding, I use the following syntax:
let hostingBox = this.doc.querySelector(`[data-acc-text='${svgObjects[i].accBoxName}']`);
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, A great on-line tool to optimize your SVG files can be found at https://jakearchibald.github.io/svgomg/
p.s. No jQuery involved just Template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
BTW. I love that path!
svgElement1 = document.querySelector("[data-acc-text='"+actual_accName+"'] > div > svg > g > path");Yeah, using this kind of syntax a lot. As its a great way to select specific elements in Storyline. Template_literals are nice too. Didnot know them. Great way of making code in Storyline better readable.
This is a great way to change the color of a SVG in storyline, just curious why when you add text to the SVG element, the code no longer works? Is there an extra line of code that needs to be added so it is recognized with the text? Thanks
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.