Leaflet animated marker not adjusting route path upon zooming?

Question

Here's the map with the animated marker I am coding using Leaflet. When I click start, the animated marker starts moving like I want it to, but when I zoom in or out, the marker's route doesn't adjust to the Zoom but seems to be locked into the initial Lat/Long route in pixels from the starting zoom level. What am I missing to have the animated marker recalculate its route every time the zoom level is changed? If this isn't possible, is there a way to freeze the Zoom level upon clicking "start"?

Here's my jQuery:

`var lahore = L.icon({
  iconSize: [25, 39],
  iconAnchor: [31,74],

 routeLines = [

     L.polyline([[31.5204, 74.3587], [34, 79]])
  ]
  markers = [];

$.each(routeLines, function(i, routeLine) {

 var marker = L.animatedMarker(routeLine.getLatLngs(),{
  distance: 300, // meters
  interval: 200, // milliseconds
  autoStart: false,
  marker: lahore`

      })
   map.addLayer(marker);
   markers.push(marker);

   });


  $('#start').click(function() {
console.log('start');
$.each(markers, function(i, marker) {
  marker.start();
    });`

I've been using this leaflet Animated Marker demo for reference, but haven't been able to find what I'm missing in my code.