Merge pull request #51 from bramus/fix-css-polyfill-load

Fix loading of CSS Polyfill - fix #50
flackr · Apr 22, 2022 · 3233112 · 3233112
2 parents ad29e62 + 0950b17
commit 3233112
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 2 deletions.
diff --git a/demo/basic/css.html b/demo/basic/css.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<style>
+    body {
+        height: 2000px;
+        padding-top: 200px;
+    }
+
+    #test {
+        display: block;
+        width: 100px;
+        height: 100px;
+        background: green;
+        position: fixed;
+        top: 0;
+    }
+
+    #container {
+        position: absolute;
+        top: 400px;
+        height: 200px;
+        width: 200px;
+        background: blue;
+    }
+
+    @scroll-timeline scroll-in-document {
+    }
+
+    @keyframes move {
+        from {
+            transform: translateY(0);
+        }
+
+        to {
+            transform: translateY(1000px);
+        }
+    }
+
+    #test {
+	    animation: 1s linear move forwards;
+	    animation-timeline: scroll-in-document;
+    }
+</style>
+<body>
+<h1>ScrollTimeline polyfill</h1>
+<p>A <a href="../parallax/">more advanced demo based on element intersection</a>.</p>
+<div id="test"></div>
+<div id="container"></div>
+<script src="../../dist/scroll-timeline.js"></script>
+</body>
diff --git a/dist/scroll-timeline.js b/dist/scroll-timeline.js
diff --git a/dist/scroll-timeline.js.map b/dist/scroll-timeline.js.map
diff --git a/index.html b/index.html
@@ -12,6 +12,9 @@
     <li>
         <a href="demo/basic/">demo/basic</a>
     </li>
+    <li>
+        <a href="demo/basic/css.html">demo/basic/css</a>
+    </li>
     <li>
         <a href="demo/parallax/">demo/parallax</a>
     </li>

diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js
@@ -155,6 +155,11 @@ function createScrollTimeline(name) {
 }
 
 export function initCSSPolyfill() {
+  // Don't load if browser claims support
+  if (CSS.supports("animation-timeline: works")) {
+    return;
+  }
+
   initMutationObserver();
 
   // We are not wrapping capturing 'animationstart' by a 'load' event,