OpenLayers baselayer (OSM) is not as smooth as osm.org - openlayers-6

Question

I am new into OpenLayers and setting my hands on it. I have added baselayer (osm). But i have noticed that the OpenLayers base layer is not as smooth as org.com. When I try to zoom in and out there is step zooming and osm.org has just 18 zoom level and OpenLayers has more than that. I want exact same smoothness and less zoom level.
var gridsetName = "EPSG:900913";
var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20', 'EPSG:900913:21', 'EPSG:900913:22', 'EPSG:900913:23', 'EPSG:900913:24', 'EPSG:900913:25', 'EPSG:900913:26', 'EPSG:900913:27', 'EPSG:900913:28', 'EPSG:900913:29', 'EPSG:900913:30'];
var baseUrl = "http://localhost:8080/geoserver/gwc/service/wmts";
var style = "";
var format = "application/vnd.mapbox-vector-tile";
var projection = new Projection({
code: "EPSG:900913",
units: "m",
axisOrientation: "neu",
});
var layerCache = {};
var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.2985821416974068, 0.1492910708487034, 0.0746455354243517, 0.0373227677121758, 0.0186613838560879, 0.009330691928044, 0.004665345964022, 0.002332672982011, 0.0011663364910055, 5.831682455027E-4, 2.915841227514E-4, 1.457920613757E-4];
var view = new View({
center: [0, 0],
zoom: 2,
resolution: resolutions,
projection: projection,
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
});
var map = new Map({
layers: [
new TileLayer({
preload: Infinity,
source: new OSM({ cacheSize: 20000 }),
}),
],
target: "map",
loadTilesWhileAnimating: true,
loadTilesWhileInteracting: true,
view: view,
});
map
.getView()
.fit([-20037508.34, -20037508.34, 20037508.34, 20037508.34], map.getSize());

Answer 1

To restrict the zoom to 18 levels you will need to specify maxZoom in the view options, and in OpenLayers 6 you will need to specify multiWorld: true to get to zoom 0. You can also constrain to integer zoom levels, etc.
var view = new View({
center: [0, 0],
zoom: 2,
maxZoom: 18,
multiWorld: true,
constrainResolution: true,
smoothResolutionConstraint: false,
});
You can also set options for the map interactions to vary the duration of the zoom animation, for example:
interactions: defaultInteractions({zoomDuration: 100}),