Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add animation-range support for ScrollTimeline #153

Merged
merged 20 commits into from
Jan 31, 2024
+274 −394
Merged

Add animation-range support for ScrollTimeline #153

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
37956a9
Remove unused intersection-based-offset + used util function
bramus Dec 25, 2023
ea2abe6
calculateRelativePosition needs the subject as the 4th argument
bramus Dec 25, 2023
ba3fc70
Introduce normalizeAxis util function
bramus Dec 25, 2023
b8e1fc8
Add scroll-timeline with animation-range demo
bramus Dec 25, 2023
943fc96
Add support for animation-range with ScrollTimeline
bramus Dec 25, 2023
b1ae6e3
Make call to correct function to parse the range offset
bramus Dec 25, 2023
85d3e30
Build the project before running tests
bramus Dec 25, 2023
d1a5902
Only parse animationRange if its a ScrollTimeline
bramus Dec 26, 2023
69ee78f
Return 0 in case no animationRange is set
bramus Dec 26, 2023
c48e980
Safer getting of rangeStart/rangeEnd
bramus Dec 26, 2023
0983913
Update test results
bramus Dec 26, 2023
aa29b30
Use cached sourceMeasurements instead of recomputing style
bramus Dec 28, 2023
cf07f6e
Update test results
bramus Jan 3, 2024
a596e06
Refactor: Don’t loiter the ScrollTimeline / ViewTimeline classes with…
bramus Jan 26, 2024
db921ba
Update comment
bramus Jan 26, 2024
121b370
Remove unncessary build step
bramus Jan 26, 2024
9079a8e
Revert changes to npm scripts / build process
bramus Jan 28, 2024
daa55db
Merge branch 'master' into feat-scroll-timeline-animation-range
bramus Jan 29, 2024
0f57972
Split on any whitespace character
bramus Jan 31, 2024
adb421d
Merge branch 'master' into feat-scroll-timeline-animation-range
bramus Jan 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions .github/workflows/gh-pages.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,6 @@ jobs:
uses: actions/configure-pages@v3
- name: Install Node.js dependencies
run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
- name: Build with microbundle
run: "npm run build"
- name: Checkout WPT
run: "npm run test-setup"
- name: WPT hosts
Expand Down
43 changes: 43 additions & 0 deletions demo/scroll-timeline-css/anonymous-scroll-timeline-with-range.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
"build": "microbundle -f iife",
"dev": "run-all \"serve\" \" microbundle watch -f iife \"",
"deploy": "npm run build",
"test-setup": "node test/setup/checkout-wpt.mjs",
"test:wpt": "npm run test-setup && cd test && cd wpt && (python wpt run --headless -y --log-wptreport ../report/data.json --log-wptscreenshot=../report/screenshots.txt --log-html=../report/index.html --inject-script ../../dist/scroll-timeline.js firefox scroll-animations || true)",
"test:simple": "npm run test-setup && cd test && cd wpt && python wpt serve --inject-script ../../dist/scroll-timeline.js",
"test-setup": "node test/setup/checkout-wpt.mjs && npm run build",
bramus marked this conversation as resolved.
Show resolved Hide resolved
bramus marked this conversation as resolved.
Show resolved Hide resolved
"test:compare": "node test/summarize-json.mjs test/report/data.json > test/report/summary.txt && echo 'Comparing test results. If different and expected, patch the following diff to test/expected.txt:' && diff test/expected.txt test/report/summary.txt"
},
"repository": {
Expand Down
224 changes: 0 additions & 224 deletions src/intersection-based-offset.js
View file
Open in desktop

This file was deleted.

Loading
Loading