Draw line in reverse SVG path

[tnorlund]

I'm moving my Illustrator SVG's into React Spring. I have separate path elements that I'd like to animate separately. I have a large <Spring> that I'd like to animate each path in.

<Spring
  native
  to={{ x: inView ?  1 : 0 }}
>
  <animated.polyline
    strokeDashoffset={
      props.x
        .interpolate( { range: [1, 0], output: [0, 100] } )
        .interpolate( x => x )
    }
    stroke-dasharray={`100`}
    name="checkMark"
    fill={`none`}
    stroke={blue}
    strokeWidth={`1.5625`}
    strokeLinecap={`round`}
    points="43.96 50.03 40.84 53.15 39.32 51.65"
  />
</Spring>

The pathing I get from Illustrator is drawn backwards with this path. How do I make it draw itself the other way around?

[tomdohnal]

I think that you can solve it if you use output: [0, -100] instead of output: [0, 100] in your .interpolate(...) call

[manfromanotherland]

I couldn't figure out how to do this last week, so what I did instead is reversing the SVG path on Sketch — will try your suggestion later on @tomdohnal!

[tnorlund]

The negative output did the job for me. I'm using illustrator. I wonder if there's a way to reverse the path in it.