From a6552d892752b663d53abd07ab20397eed04e79d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cchrisshank=E2=80=9D?= Date: Sun, 17 Nov 2024 17:13:45 -0800 Subject: [PATCH] fix semantic zoom animation --- demo/index.html | 1 + demo/semantic-zoom.html | 24 ++++++++++++++---------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/demo/index.html b/demo/index.html index 8357298..8d88f46 100644 --- a/demo/index.html +++ b/demo/index.html @@ -33,6 +33,7 @@

Folk Canvas Primitives

  • Spreadsheet Graph
  • Spreadsheet Propagator
  • Wiggly
    • +
  • Semantic Zoom
    • diff --git a/demo/semantic-zoom.html b/demo/semantic-zoom.html index 42905eb..6c8d329 100644 --- a/demo/semantic-zoom.html +++ b/demo/semantic-zoom.html @@ -63,8 +63,16 @@ height: 100%; } - input { - margin-top: 1rem; + ::view-transition-group(slider), + ::view-transition-old(slider), + ::view-transition-new(slider) { + animation-duration: 0s !important; + } + + label { + display: flex; + align-items: center; + margin: 1rem; } fc-connection { @@ -95,13 +103,9 @@ width: 20px; aspect-ratio: 1; border-radius: 50%; - - h2, - p { - display: none; - } } + body[zoom='0'] fc-geometry :is(h2, p), body[zoom='50'] fc-geometry p { display: none; } @@ -110,7 +114,7 @@ @@ -152,13 +156,13 @@

    Consectetur elit

    FolkGeometry.register(); FolkConnection.register(); - const range = document.querySelector('input'); - document.body.querySelectorAll('fc-geometry').forEach((el, i) => (el.style.viewTransitionName = `g${i}`)); document.body.querySelectorAll('fc-connection').forEach((el, i) => (el.style.viewTransitionName = `c${i}`)); document.body.querySelectorAll('h2').forEach((el, i) => (el.style.viewTransitionName = `h${i}`)); document.body.querySelectorAll('p').forEach((el, i) => (el.style.viewTransitionName = `p${i}`)); + const range = document.querySelector('input'); + range.addEventListener('input', (e) => { const currentZoom = range.valueAsNumber; let semanticZoom;