Skip to content

Commit e7799de

Browse files
johannesodlandjohannesodland
authored
Support CSSMathValue as rangeStart and rangeEnd if it can be simplified to a CSSUnitValue with px as unit. (#171)
1 parent 17ec7f7 commit e7799de

File tree

6 files changed

+890
-8
lines changed

6 files changed

+890
-8
lines changed

‎demo/view-timeline/with-math-value-range.html

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>view-timeline demo</title>
7+
</head>
8+
<style type="text/css">
9+
#container {
10+
display: flex;
11+
flex-direction: column;
12+
border: 1px solid black;
13+
height: 500px;
14+
width: 500px;
15+
overflow-x: hidden;
16+
overflow-y: scroll;
17+
position: relative;
18+
align-items: flex-start;
19+
}
20+
21+
.overlay {
22+
position: absolute;
23+
top: 10px;
24+
left: 10px;
25+
width: 500px;
26+
height: 500px;
27+
pointer-events: none;
28+
}
29+
30+
.spacer {
31+
display: inline-block;
32+
flex: none;
33+
height: 120vh;
34+
width: 120vw;
35+
}
36+
37+
#subject {
38+
background-color: rgba(0, 0, 255, 0.5);
39+
display: inline-block;
40+
flex: none;
41+
height: 100px;
42+
width: 90%;
43+
}
44+
45+
.progress-bar,
46+
.progress-bar-progress {
47+
border: 1px solid green;
48+
height: 20px;
49+
width: 300px;
50+
position: absolute;
51+
inset-inline-start: 20px;
52+
padding: 0;
53+
}
54+
55+
.progress-bar > span {
56+
padding-left: 5px;
57+
padding-right: 5px;
58+
}
59+
60+
.progress-bar-progress {
61+
border-color: transparent;
62+
background-color: rgba(0, 200, 0, 0.3);
63+
width: 0px;
64+
}
65+
66+
</style>
67+
<body>
68+
<div id="container">
69+
<div class="spacer"></div>
70+
<div id="subject"></div>
71+
<div class="spacer"></div>
72+
</div>
73+
<div class="overlay">
74+
<div class="progress-bar" style="top: 20px;"><span>cover</span></div>
75+
<div class="progress-bar" style="top: 70px;"><span>cover calc(0% + 200px) calc(100% - 100px)</span></div>
76+
<div class="progress-bar-progress" style="top: 20px;"></div>
77+
<div class="progress-bar-progress" style="top: 70px;"></div>
78+
</div>
79+
80+
<div class="overlay">
81+
<div style="height: 99px"></div>
82+
<div style="border-top: 1px solid red"></div>
83+
<div style="height: 100px"></div>
84+
<div style="height: 99px"></div>
85+
<div style="border-top: 1px solid red"></div>
86+
</div>
87+
88+
</body>
89+
<script src="../../dist/scroll-timeline.js"></script>
90+
<script type="text/javascript">
91+
"use strict";
92+
93+
const progressBars = document.querySelectorAll('.progress-bar-progress');
94+
const createProgressAnimation = (bar, rangeStart, rangeEnd, axis, inset = 'auto') => {
95+
const subject = document.getElementById('subject');
96+
const viewTimeline = new ViewTimeline({
97+
'subject': subject,
98+
'axis': axis,
99+
'inset': inset
100+
});
101+
bar.animate( { width: ['0px', '300px' ] }, {
102+
timeline: viewTimeline,
103+
rangeStart: rangeStart,
104+
rangeEnd: rangeEnd,
105+
fill: 'both'
106+
});
107+
}
108+
const createAnimations = (selection) => {
109+
const axis = 'block';
110+
document.getAnimations().forEach(anim => {
111+
anim.cancel();
112+
});
113+
createProgressAnimation(progressBars[0], { rangeName: 'cover', offset: CSS.percent(0) },
114+
{ rangeName: 'cover', offset: CSS.percent(100) }, axis);
115+
createProgressAnimation(progressBars[1],
116+
{
117+
rangeName: "cover",
118+
offset: new CSSMathSum(CSS.percent(0), new CSSMathProduct(CSS.number(2), CSS.px(100))),
119+
},
120+
{
121+
rangeName: "cover",
122+
offset: new CSSMathSum(CSS.percent(100), CSS.px(-100)),
123+
}, axis)
124+
};
125+
126+
createAnimations();
127+
</script>
128+
</html>

0 commit comments

Comments
 (0)