diff --git a/examples/index.html b/examples/index.html
index e838365..832273d 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -64,6 +64,8 @@
       
         <li><a href="compare.html?name=repeatEvent">repeatEvent</a></li>
       
+        <li><a href="compare.html?name=responsive">responsive</a></li>
+      
         <li><a href="compare.html?name=restart">restart</a></li>
       
         <li><a href="compare.html?name=set">set</a></li>
diff --git a/examples/svg/responsive.svg b/examples/svg/responsive.svg
new file mode 100644
index 0000000..e573957
--- /dev/null
+++ b/examples/svg/responsive.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg id="container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500">
+  <rect x="0" y="0" height="100" fill="green">
+    <animate attributeName="width" from="0%" to="100%" dur="5s" fill="freeze"/>
+  </rect>
+  <script>
+    'use strict';
+    var container = document.getElementById('container');
+
+    setTimeout(function() {
+      container.style.width = 200;
+    }, 3000);
+  </script>
+</svg>
diff --git a/examples/web/responsive.html b/examples/web/responsive.html
new file mode 100644
index 0000000..f9e78d6
--- /dev/null
+++ b/examples/web/responsive.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <svg id="container" width="500">
+      <rect id="element" x="0" y="0" height="100" fill="green">
+      </rect>
+    </svg>
+    <script src="../web-animations.js"></script>
+    <script>
+      'use strict';
+      var container = document.getElementById('container');
+      var element = document.getElementById('element');
+      element.animate([{width: '0%'}, {width: '100%'}], {duration: 5000, fill: 'forwards'});
+
+      setTimeout(function() {
+        container.style.width = 200;
+      }, 3000);
+    </script>
+  </body>
+</html>
