From b4fb42177dcc086130b172c3b667dbe5f8fdc4ca Mon Sep 17 00:00:00 2001 From: Anders Hartvoll Ruud Date: Tue, 23 May 2023 09:47:27 -0700 Subject: [PATCH] [scroll-animations] Support ranges for non-view timelines Support for this has mostly been prepared well by other CLs (CL:4534338, CL:4532499). The only notable change needed was moving the TimelineRange calculation from ViewTimeline to ScrollSnapshotTimeline. Otherwise a DeferredTimeline with an attached ViewTimeline would instead calculate its TimelineRange as if attached to a ScrollTimeline. Fixed: 1441013 Change-Id: I3879c31161592af071ac2a5a7c02634db6cbc6d6 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4556284 Reviewed-by: Kevin Ellis Commit-Queue: Anders Hartvoll Ruud Cr-Commit-Position: refs/heads/main@{#1147958} --- .../css/scroll-timeline-range-animation.html | 182 ++++++++++++++++++ .../css/view-timeline-range-animation.html | 83 +++++--- 2 files changed, 238 insertions(+), 27 deletions(-) create mode 100644 scroll-animations/css/scroll-timeline-range-animation.html diff --git a/scroll-animations/css/scroll-timeline-range-animation.html b/scroll-animations/css/scroll-timeline-range-animation.html new file mode 100644 index 00000000000000..df087da6e2b023 --- /dev/null +++ b/scroll-animations/css/scroll-timeline-range-animation.html @@ -0,0 +1,182 @@ + +Scroll timelines and animation attachment ranges + + + + + + + +
+
+ + + + + + diff --git a/scroll-animations/css/view-timeline-range-animation.html b/scroll-animations/css/view-timeline-range-animation.html index bebee9fd68e95b..9e5993b63a8792 100644 --- a/scroll-animations/css/view-timeline-range-animation.html +++ b/scroll-animations/css/view-timeline-range-animation.html @@ -1,6 +1,7 @@ -Animations using named timeline ranges +View timelines and animation attachment ranges + @@ -16,22 +17,35 @@ width: 200px; height: 200px; } - #target { + #scroller > div { margin: 800px 0px; width: 100px; height: 100px; - z-index: -1; - background-color: green; + } + #target { font-size: 10px; + background-color: green; + z-index: -1; }
-