kenneh

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