From 58f7e3df1e4978fa0cf0972c6019f12608f83d0b Mon Sep 17 00:00:00 2001
From: Emma Cunningham <the.cunning.ham@gmail.com>
Date: Fri, 1 Mar 2019 11:36:18 -0800
Subject: [PATCH] fix(line_geometries): use opacity for spring animation

---
 src/components/react_canvas/line_geometries.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/react_canvas/line_geometries.tsx b/src/components/react_canvas/line_geometries.tsx
index 9f408e29cd..32fc76649e 100644
--- a/src/components/react_canvas/line_geometries.tsx
+++ b/src/components/react_canvas/line_geometries.tsx
@@ -29,7 +29,7 @@ interface LineGeometriesDataState {
 export class LineGeometries extends React.PureComponent<
   LineGeometriesDataProps,
   LineGeometriesDataState
-> {
+  > {
   static defaultProps: Partial<LineGeometriesDataProps> = {
     animated: false,
   };
@@ -41,6 +41,7 @@ export class LineGeometries extends React.PureComponent<
       overPoint: undefined,
     };
   }
+
   render() {
     return (
       <Group ref={this.barSeriesRef} key={'bar_series'}>
@@ -153,11 +154,12 @@ export class LineGeometries extends React.PureComponent<
       if (this.props.animated) {
         return (
           <Group key={i} x={transform.x}>
-            <Spring native from={{ line }} to={{ line }}>
-              {(props: { line: string }) => (
+            <Spring native reset from={{ opacity: 0 }} to={{ opacity: 1 }}>
+              {(props: { opacity: number }) => (
                 <animated.Path
+                  opacity={props.opacity}
                   key="line"
-                  data={props.line}
+                  data={line}
                   strokeWidth={strokeWidth}
                   stroke={color}
                   listening={false}
@@ -172,7 +174,7 @@ export class LineGeometries extends React.PureComponent<
       } else {
         return (
           <Path
-            key="line"
+            key={i}
             data={line}
             strokeWidth={strokeWidth}
             stroke={color}