Leaflet/OpenLayers3 change size animation with velocity.js - leaflet

Question

I'm trying to make an animation with velocity.js of a map. I tried 2 different libraries: leaflet, and openlayers3.
Here are the jsfiddles: leaflet, openlayers3
The leaflet animation is smooth on my chrome, but not on firefox, edge, or even qt webview.
I know that invalidateSize()/updateSize() just change the position of the tiles and download new ones but I want them to produce a smooth animation.
wish somebody have seen this kind of animation. Or know how could I solve the issue, thanks.
leaflet
$(document).ready(function() {
var position = {
lat: 43.180176,
lng: 13.792964,
zoomLevel: 4
};
var swBound = L.latLng(-90, -180);
var neBound = L.latLng(90, 180);
var maxBounds = L.latLngBounds(swBound, neBound);
var entityMap = L.map($("#smallMapContainer")[0], {
minZoom: 2,
maxBounds: maxBounds,
zoomControl: false
});
var streetMapURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
L.tileLayer(streetMapURL, {
maxZoom: 18
}).addTo(entityMap);
//entityMap.fitWorld();
entityMap.setView(L.latLng(position.lat, position.lng), position.zoomLevel);
var nextIndexes = 0;
var aaa = function() {
var smallMapPosition = $("#smallMapContainer").position();
var newW = $("body").width() - 90;
var newH = $("body").height() - 90;
var newX = smallMapPosition.top + newH / 2 - 100;
var newY = smallMapPosition.left + newW / 2 - 150;
$("#smallMapContainer").velocity({
top: newX,
left: newY
}, {
duration: 500,
complete: function() {
$("#smallMapContainer").velocity({
width: newW,
height: newH,
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000,
progress: function() {
entityMap.invalidateSize();
},
complete: function() {
if (nextIndexes++ % 2 == 0) { // with animation
entityMap.setView(L.latLng(55.751674, 37.637059), position.zoomLevel);
} else {
entityMap.setView(L.latLng(43.180176, 13.792964), position.zoomLevel);
}
$("#smallMapContainer").velocity({
width: 300,
height: 200,
top: newX,
left: newY
}, {
delay: 1000,
duration: 1000,
progress: function() {
entityMap.invalidateSize();
},
complete: function() {
$("#smallMapContainer").velocity({
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000
});
}
});
}
});
}
});
}
aaa();
setTimeout(function() {
aaa();
}, 10000);});
openlayers
$(document).ready(function() {
var view = new ol.View({
// the view's initial state
center: ol.proj.fromLonLat([13.792964, 43.180176]),
zoom: 4
});
var map = new ol.Map({
layers: [
new ol.layer.Tile({
preload: 4,
source: new ol.source.OSM()
})
],
loadTilesWhileAnimating: true,
target: 'smallMapContainer',
controls: ol.control.defaults({
attributionOptions: ({
collapsible: false
})
}),
view: view
});
nextIndexes = 0;
var animateMap = function() {
var smallMapPosition = $("#smallMapContainer").position();
var newW = $("body").width() - 90;
var newH = $("body").height() - 90;
var newX = smallMapPosition.top + newH / 2 - 100;
var newY = smallMapPosition.left + newW / 2 - 150;
$("#smallMapContainer").velocity({
top: newX,
left: newY
}, {
duration: 500,
complete: function() {
$("#smallMapContainer").velocity({
width: newW,
height: newH,
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000,
progress: function() {
map.updateSize();
},
complete: function() {
if (nextIndexes++ % 2 == 0) {
var pan = ol.animation.pan({
duration: 1000,
source: /** #type {ol.Coordinate} */ (view.getCenter())
});
map.beforeRender(pan);
view.setCenter(ol.proj.fromLonLat([37.637059, 55.751674]));
} else {
var pan = ol.animation.pan({
duration: 1000,
source: /** #type {ol.Coordinate} */ (view.getCenter())
});
map.beforeRender(pan);
view.setCenter(ol.proj.fromLonLat([13.792964, 43.180176]));
}
$("#smallMapContainer").velocity({
width: 300,
height: 200,
top: newX,
left: newY
}, {
delay: 1000,
duration: 1000,
progress: function() {
map.updateSize();
},
complete: function() {
$("#smallMapContainer").velocity({
top: smallMapPosition.top,
left: smallMapPosition.left
}, {
duration: 1000
});
}
});
}
});
}
});
}
animateMap();});

Answer 1

Disclaimer: If you're adament on using Velocity this is in no means a validate answer but i thought i'de throw it in here because i think it's unnecessary to pull in an entire animation library to accomplish something that can easily be done with standard CSS.
You can accomplish the same effect by using CSS keyframe animation, it will run much smoother than using an external animation library:
#leaflet {
width: 300px;
height: 200px;
position: absolute;
top: 55px;
left: 45px;
animation-name: move;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
}
#keyframes move {
0% {
top: 55px;
left: 45px;
}
25% {
top: calc(50% - (200px / 2));
left: calc(50% - (300px / 2));
width: 300px;
height: 200px;
}
50% {
top: calc(5%);
left: calc(5%);
width: 90%;
height: 90%;
}
75% {
top: calc(50% - (200px / 2));
left: calc(50% - (300px / 2));
width: 300px;
height: 200px;
}
100% {
top: 55px;
left: 45px;
}
}
The only drawback/problem is that somehow (got to look further into this, but i'm low on time at the moment) L.Map's 'resize' event doesn't seem to fire when resizing the map container through CSS animation. So i've used ResizeSensor from CSS Element Queries to be able to call invalidateSize on the map instance when the container gets resized.
Here's a working example on Plunker: http://plnkr.co/edit/EyQFbm?p=preview