React-leaflet V3 Polyline animation

Question

I am creating a Polyline component using two positions with Typescript based on the react-leaflet. I want to make an animation from the source to the destination. It should look like something is flowing between source to destination. I'm able to set the animation with CSS Animation however, I have the issue that the transition between the last color( yellow at 100%) and return to the initial position (blue at 0%) is happening very abruptly, not smooth like other changes in between. I want these last changes also smooth like others so that it looks like a continuous flow. Here is my code,

React-leaflet Polyline

<Polyline 
  key={eachConnection.id} 
  weight={4}
  className="water-flow"
  positions={[[source.lat, source.long],[target.lat, target.long]]}
/>

CSS for the Polyline

.water-flow{
  stroke: lime;
  stroke-width: 3;
  animation: 3s ease infinite Anim;
}

@keyframes Anim {
  0%{
    stroke : blue;
  }

  2%{
    stroke: green;
  }

  50%{
    stroke: red;
  }

  98%{
    stroke: cyan;
  }
  
  100%{
    stroke: yellow;
  }
}

score 0 · Answer 1 · answered Jul 07 '22 at 08:30

Recently I used React Leaflet Drift Marker https://github.com/hugobarragon/react-leaflet-drift-marker (for animating the marker) combined with Polyline https://react-leaflet.js.org/docs/example-vector-layers/ component (for showing the trail) but the effort is not simple

I found a great Leaflet library that combined animation marker and trail here https://github.com/Igor-Vladyka/leaflet.motion

Here is the demo https://igor-vladyka.github.io/leaflet.motion/

Currently, I only found the library using Vanilla Js (we could use it for any frontend framework like React Js, Vue Js, and Angular Js) but hope that in the near future the library would be available directly for each framework

React-leaflet V3 Polyline animation

1 Answers1