diff --git a/examples/.eslintrc b/examples/.eslintrc
index c404b2e6e6..98965641e3 100644
--- a/examples/.eslintrc
+++ b/examples/.eslintrc
@@ -7,6 +7,7 @@
     "d3": false,
     "domtoimage": false,
     "geojsonvt": false,
+    "gifler": false,
     "GyroNorm": false,
     "jsPDF": false,
     "jsts": false,
diff --git a/examples/animated-gif.html b/examples/animated-gif.html
new file mode 100644
index 0000000000..1f5733d06b
--- /dev/null
+++ b/examples/animated-gif.html
@@ -0,0 +1,12 @@
+---
+layout: example.html
+title: Animated GIF
+shortdesc: Example of using an animated GIF as an icon.
+docs: >
+  Example of using an animated GIF as an icon.
+  Animation is achieved using the <a href="http://themadcreator.github.io/gifler/" target="_blank">Gifler</a> library.
+tags: "animation, vector, style, icon, gif"
+resources:
+  - https://unpkg.com/gifler@0.1.0/gifler.min.js
+---
+<div id="map" class="map"></div>
diff --git a/examples/animated-gif.js b/examples/animated-gif.js
new file mode 100644
index 0000000000..22c441f3fd
--- /dev/null
+++ b/examples/animated-gif.js
@@ -0,0 +1,64 @@
+import Feature from '../src/ol/Feature.js';
+import Map from '../src/ol/Map.js';
+import Point from '../src/ol/geom/Point.js';
+import View from '../src/ol/View.js';
+import {Icon, Style} from '../src/ol/style.js';
+import {Stamen, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+
+const iconFeature = new Feature({
+  geometry: new Point([0, 0]),
+});
+
+const vectorSource = new VectorSource({
+  features: [iconFeature],
+});
+
+const vectorLayer = new VectorLayer({
+  source: vectorSource,
+});
+
+const rasterLayer = new TileLayer({
+  source: new Stamen({
+    layer: 'toner',
+  }),
+});
+
+const map = new Map({
+  layers: [rasterLayer, vectorLayer],
+  target: document.getElementById('map'),
+  view: new View({
+    center: [0, 0],
+    zoom: 2,
+  }),
+});
+
+const gifUrl = 'data/globe.gif';
+const gif = gifler(gifUrl);
+gif.frames(
+  document.createElement('canvas'),
+  function (ctx, frame) {
+    if (!iconFeature.getStyle()) {
+      iconFeature.setStyle(
+        new Style({
+          image: new Icon({
+            img: ctx.canvas,
+            imgSize: [frame.width, frame.height],
+            opacity: 0.8,
+          }),
+        })
+      );
+    }
+    ctx.clearRect(0, 0, frame.width, frame.height);
+    ctx.drawImage(frame.buffer, frame.x, frame.y);
+    map.render();
+  },
+  true
+);
+
+// change mouse cursor when over icon
+map.on('pointermove', function (e) {
+  const pixel = map.getEventPixel(e.originalEvent);
+  const hit = map.hasFeatureAtPixel(pixel);
+  map.getTarget().style.cursor = hit ? 'pointer' : '';
+});
diff --git a/examples/data/globe.gif b/examples/data/globe.gif
new file mode 100644
index 0000000000..10c0bb870b
Binary files /dev/null and b/examples/data/globe.gif differ