diff --git a/demo/scroll-timeline-external-css/index.html b/demo/scroll-timeline-external-css/index.html new file mode 100644 index 0000000..a8bfdd8 --- /dev/null +++ b/demo/scroll-timeline-external-css/index.html @@ -0,0 +1,13 @@ + + + + + +
+
+
+
+
+
+ + diff --git a/demo/scroll-timeline-external-css/styles.css b/demo/scroll-timeline-external-css/styles.css new file mode 100644 index 0000000..6b1f2cc --- /dev/null +++ b/demo/scroll-timeline-external-css/styles.css @@ -0,0 +1,33 @@ +#container { + scroll-timeline-name: --foo, --bar; + overflow: scroll; + width: 500px; + height: 500px; + border: 1px solid #333; +} + +.spacer { + width: 100%; + height: 500px; +} + +#progress { + position: fixed; + height: 10px; + background-color: red; + animation: 1s progress linear forwards; + animation-timeline: --foo; +} + +body { + margin: 0px; +} + +@keyframes progress { + from { + width: 0px; + } + to { + width: 500px; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 54985ea..44c169e 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,9 @@
  • demo/view-timeline-external-css
    • +
  • + demo/scroll-timeline-external-css +
  • demo/basic/anonymous-scroll-timeline.html
    • diff --git a/src/scroll-timeline-css.js b/src/scroll-timeline-css.js index 5d3d0b0..25a3113 100644 --- a/src/scroll-timeline-css.js +++ b/src/scroll-timeline-css.js @@ -53,7 +53,14 @@ function initMutationObserver() { // Most likely we won't be able to fetch resources from other origins. return; } - fetch(linkElement.getAttribute('href')).then(async (response) => { + + // Stop loading the stylesheet to ensure that we finished parsing it before it's + // loaded by the browser (and that animations are only started after + // we collected the required options) + const href = linkElement.getAttribute('href') + linkElement.removeAttribute('href') + + fetch(href).then(async (response) => { const result = await response.text(); let newSrc = parser.transpileStyleSheet(result, true); newSrc = parser.transpileStyleSheet(result, false); @@ -61,6 +68,8 @@ function initMutationObserver() { const blob = new Blob([newSrc], { type: 'text/css' }); const url = URL.createObjectURL(blob); linkElement.setAttribute('href', url); + } else { + linkElement.setAttribute('href', href); } }); }