SVG in react component is not animating

[ghost]

I'm seeing an issue with a SVG I have inside a react class. The class is as follows:

var React = require('react');

var HeaderLoader = React.createClass({
    render: function() {
        return (
            <div id="header-loader" className="header-loader hide left">
                <svg width="60px" height="45px" viewBox="0 0 187.3 93.7" preserveAspectRatio="xMidYMid meet">
                    <path stroke="#FF715B" id="outline" fill="none" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1                c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"></path>
                    <path id="outline-bg" fillOpacity="0.05" fill="none" stroke="#FF715B" strokeWidth="10" strokeLinecap="round" strokeLinejoin="round" strokeMiterlimit="10" d="M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1              c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z"></path>
                </svg>
            </div>
        );
    }

});

module.exports = HeaderLoader;

It renders the SVG fine, but the path elements aren't animating as they should.

I'm on React and React Dom 15.2.1

Thanks

[keyz]

Hey,

In your example I didn't see the part that specifies animation. Could you explain to me how it would be animated? Thanks!

[ghost]

Hey Keyan,

I had adapted the svg from http://tympanus.net/Tutorials/SVGLoaderGSAP/index6.html

Looks like I was missing the CSS animations. Good spot. Thanks.

[ghost]

Actually @keyanzhang ,

Do keyframe animations work in React?

I have added the following to my sass file:

#outline {
  stroke-dasharray: $len*0.01, $len;
  stroke-dashoffset: 0;
  animation: anim $time linear infinite;
}
@keyframes anim {
  12.5% {
    stroke-dasharray: $len*0.14, $len;
    stroke-dashoffset: -$len*0.11;
  }
  43.75% {
    stroke-dasharray: $len*0.35, $len;
    stroke-dashoffset: -$len*0.35;
  }
  100% {
    stroke-dasharray: $len*0.01, $len;
    stroke-dashoffset: -$len*0.99;
  }
}

But it still doesn't seem to be animating.

[keyz]

It should work. Could you provide a jsfiddle (https://jsfiddle.net/reactjs/69z2wepo/ is a good one to start) to demonstrate the issue?

[ghost]

Hey @keyanzhang

I got it working!

It was actually just a total user error on my part. I had changed the opacity attribute to fillOpacity for some bizarre reason lol.

Thanks for you help!