Animations not working when zooming
benb545 opened this issue · comments
benb545 commented
https://gyazo.com/5e24d35d712bc53c98bd9654bae3ca8a
I think this is because the length of the path does not change during zoom, so when I zoom in, its so long that you don't see the animation, and then its smaller, you see small chunks of paths moving.
My code:
`
const attackerIcon = LeafletMap.divIcon({
className: 'attacker',
html: '
});
LeafletMap.marker([41.224374, 0.145053], {icon: attackerIcon}).addTo(this.map);
LeafletMap.curve(['M', [41.224374, 0.145053],
'C', [47.387311, 21.503481],
[45.406853, 38.448971],
[32.638331, 36.582095]], { animate: {duration: 1600, iterations: Infinity, easting: 'ease-in-out'} }).addTo(this.map);
const target1 = LeafletMap.divIcon({
className: 'target',
html: '<div></div>'
});
LeafletMap.marker([32.638331, 36.582095], {icon: target1}).addTo(this.map);
LeafletMap.curve(['M', [41.224374, 0.145053],
'C', [44.285435, -25.579085],
[31.887952, -66.536115],
[6.414813, -73.040021]], { animate: {duration: 1600, iterations: Infinity, easting: 'ease-in-out'} }).addTo(this.map);
const target2 = LeafletMap.divIcon({
className: 'target',
html: '<div></div>'
});
LeafletMap.marker([6.414813, -73.040021], {icon: target2}).addTo(this.map);
`