Add animation-range support for ScrollTimeline (#153)

flackr · Jan 31, 2024 · b2f44df · b2f44df
1 parent 4229714
commit b2f44df
Show file tree

Hide file tree

Showing 8 changed files with 274 additions and 394 deletions.
diff --git a/demo/scroll-timeline-css/anonymous-scroll-timeline-with-range.html b/demo/scroll-timeline-css/anonymous-scroll-timeline-with-range.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<title>Anonymous Scroll Progress Timeline</title>
+
+<style>
+  @keyframes move {
+    to { transform: translateX(350px) translateY(600px); }
+  }
+
+  #box_one {
+    width: 100px;
+    height: 100px;
+    background-color: green;
+    animation: move linear both;
+    animation-timeline: scroll(y nearest);
+    animation-range: 100px 500px;
+  }
+
+  .spacer {
+    width: 100%;
+    height: 2000px;
+  }
+
+  #container {
+    width: 500px;
+    height: 500px;
+    background-color:beige;
+    overflow: auto;
+  }
+
+  body {
+    height: 3000px;
+  }
+</style>
+
+<body>
+
+  <div id="container">
+    <div id="box_one"></div>
+    <div class="spacer"></div>
+  </div>
+
+  <script src="../../dist/scroll-timeline.js"></script>
+</body>
diff --git a/src/intersection-based-offset.js b/src/intersection-based-offset.js