Animate a dashed line in Storyline with GSAP

May 07, 2024

A Storyline user asked me how to do that. With the GSAP plugin DrawSVG that is quite easy. Showing how to get that done in this video.

The code for selecting a SVG, its path and animating it, is this.

let actual_accName = "lineShape";
let svgElement1 = document.querySelector("[data-acc-text='"+actual_accName+"'] > div > div > svg > g > path");
let svg2Animate1 = document.querySelector("#"+svgElement1.id);

gsap.set(svg2Animate1,  {strokeDasharray:"25,25",strokeDashoffset:"0%"});
gsap.to(svg2Animate1,  {duration:5,strokeDasharray:"25,25",strokeDashoffset:"100%"});

Video showing this.

Be the first to reply