[animation not working in firefox, fine in other browsers]

the codepen above is the code i copied but i created a new svg image using inkscape and made a few changes such as speed, no hover, limited repeat and so on

below is the tweaked js code from the codepen above

CSSPlugin.useSVGTransformAttr = true;


var nametl = new TimelineMax({repeat: 2, repeatDelay: 0.5, yoyo: true}),

path = 'svg *',

stagger_val = 0.0125,

duration = 2;


var stagger_opts_to = {

x: 0,

y: -100,

opacity: 1,

scale: 1,

rotation: 0,

ease: Power4.easeInOut

};


function rndm(min, max) {

return Math.random() * (max - min) + min;

}



$.each($(path), function(i, el) {

nametl.set($(this), {

x: '+=' + rndm(-500, 500),

y: '+=' + rndm(-500, 500),

scale: 0,

opacity: 1

});

});



nametl.staggerTo(path, duration, stagger_opts_to, stagger_val);

below here is just a part of the svg image i wish to have the effect work on

<div class="name">

<figure>

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#"

xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg"

xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="600mm" height="100mm" viewBox="0 0 600 100"

version="1.1" id="svg8" inkscape:version="0.92.4 (5da689c313, 2019-01-14)"

sodipodi:docname="bahnnameplain2.svg">

<defs id="defs2" />

<sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0"

inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.5" inkscape:cx="1128.791"

inkscape:cy="327.99504" inkscape:document-units="mm" inkscape:current-layer="layer1" showgrid="false"

inkscape:window-width="1920" inkscape:window-height="1027" inkscape:window-x="-8" inkscape:window-y="59"

inkscape:window-maximized="1" units="mm" />

<metadata id="metadata5">

<rdf:RDF>

<cc:Work rdf:about="">

<dc:format>image/svg+xml</dc:format>

<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />

<dc:title></dc:title>

</cc:Work>

</rdf:RDF>

</metadata>

<g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-197)">

<path

style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"

d="m 50.852073,216.76453 2.834822,7.08809 5.005173,2.74033 2.07887,-9.82842 z" id="path1458"

inkscape:connector-curvature="0" />

<path

style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"

d="m 50.852073,216.76453 v 15.40357 0 l 2.834822,-8.31548 z" id="path1456"

inkscape:connector-curvature="0" />

<path

style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"

d="m 60.770938,216.76453 -2.078869,9.82842 3.554788,5.66964 v -15.49806 z" id="path1454"

inkscape:connector-curvature="0" />

<path

style="opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"

d="m 53.686895,223.85262 v 17.67039 0 l 5.005174,-14.93006 z" id="path1452"

inkscape:connector-curvature="0" />

 

i am creating an animated resume and the svg image is my name, the effect works on chrome and edge but does not work in firefox, i made a few attempts to fix but it becomes either blank or just a still image

See the Pen pjypwd by ARS (@ARS) on CodePen