Author: Adam Argyle [argyle@google.com]
Committer: GitHub [noreply@github.com] Thu, 19 Oct 2023 19:56:37 +0000
Hash: ce8c2d30c5be41c7bf00feb28894e1cd8744814f
Timestamp: Thu, 19 Oct 2023 19:56:37 +0000 (11 months ago)

+92 -2 +/-4 browse
Bounce easings (#430) 
Bounce easings (#430)

* stubs 5 new bouncy easings

* document new easings

* update tests to new prop total

* update token count test

* Apply suggestions from code review

Co-authored-by: Ric <Cthulahoop@users.noreply.github.com>

---------

Co-authored-by: Ric <Cthulahoop@users.noreply.github.com>
1diff --git a/docsite/index.html b/docsite/index.html
2index dc1b2b5..819e7a5 100644
3--- a/docsite/index.html
4+++ b/docsite/index.html
5 @@ -2257,10 +2257,14 @@
6 --ease-in-{1-5}
7 --ease-out-{1-5}
8 --ease-in-out-{1-5}
9+
10 --ease-elastic-out-{1-5}
11 --ease-elastic-in-{1-5}
12 --ease-elastic-in-out-{1-5}
13+
14 --ease-spring-{1-5}
15+ --ease-bounce-{1-5}
16+
17 --ease-step-{1-5}
18
19 /* will be removed in v2 */
20 @@ -2279,6 +2283,10 @@
21 .dramatic-ease {
22 animation: fade-in 1s var(--ease-5);
23 }
24+
25+ .bouncy {
26+ animation: slide-in-up 3s var(--ease-bounce-2);
27+ }
28 </code></pre>
29 </div>
30 </div>
31 @@ -2438,6 +2446,25 @@
32
33 <div class="block-wrap">
34 <header class="animation-control-header">
35+ <h5>Ease Bounce</h5>
36+ <button class="play-button">
37+ <svg viewBox="0 0 20 20">
38+ <use href="#play-icon" />
39+ <use href="#pause-icon" class="hidden" />
40+ </svg>
41+ </button>
42+ </header>
43+ <div class="ease-demo paused">
44+ <div style="animation-timing-function: var(--ease-bounce-1)">ease-bounce-1</div>
45+ <div style="animation-timing-function: var(--ease-bounce-2)">ease-bounce-2</div>
46+ <div style="animation-timing-function: var(--ease-bounce-3)">ease-bounce-3</div>
47+ <div style="animation-timing-function: var(--ease-bounce-4)">ease-bounce-4</div>
48+ <div style="animation-timing-function: var(--ease-bounce-5)">ease-bounce-5</div>
49+ </div>
50+ </div>
51+
52+ <div class="block-wrap">
53+ <header class="animation-control-header">
54 <h5>Ease Steps</h5>
55 <button class="play-button">
56 <svg viewBox="0 0 20 20">
57 diff --git a/src/props.easing.css b/src/props.easing.css
58index 9e90ebb..93307d1 100644
59--- a/src/props.easing.css
60+++ b/src/props.easing.css
61 @@ -77,4 +77,35 @@
62 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
63 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
64 );
65+ --ease-bounce-1: linear(
66+ 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
67+ 0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
68+ 0.885, 0.895, 0.908 89.7%, 0.946, 1
69+ );
70+ --ease-bounce-2: linear(
71+ 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
72+ 1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
73+ 0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
74+ 0.973, 1
75+ );
76+ --ease-bounce-3: linear(
77+ 0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
78+ 1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
79+ 0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
80+ 0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
81+ 0.96, 0.968, 0.981, 1
82+ );
83+ --ease-bounce-4: linear(
84+ 0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
85+ 0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
86+ 0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
87+ 0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
88+ );
89+ --ease-bounce-5: linear(
90+ 0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
91+ 0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
92+ 0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
93+ 0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
94+ 0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
95+ );
96 }
97 diff --git a/src/props.easing.js b/src/props.easing.js
98index bfaf0e0..3190ab3 100644
99--- a/src/props.easing.js
100+++ b/src/props.easing.js
101 @@ -87,4 +87,36 @@ export default {
102 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011,
103 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1
104 )`,
105+
106+ '--ease-bounce-1': `linear(
107+ 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%,
108+ 0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879,
109+ 0.885, 0.895, 0.908 89.7%, 0.946, 1
110+ )`,
111+ '--ease-bounce-2': `linear(
112+ 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765,
113+ 1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788,
114+ 0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954,
115+ 0.973, 1
116+ )`,
117+ '--ease-bounce-3': `linear(
118+ 0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764,
119+ 1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672,
120+ 0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879,
121+ 0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957,
122+ 0.96, 0.968, 0.981, 1
123+ )`,
124+ '--ease-bounce-4': `linear(
125+ 0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81,
126+ 0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%,
127+ 0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%,
128+ 0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1
129+ )`,
130+ '--ease-bounce-5': `linear(
131+ 0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627,
132+ 0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892,
133+ 0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%,
134+ 0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943,
135+ 0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1
136+ )`,
137 }
138 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
139index 4719fb3..0057680 100644
140--- a/test/basic.test.cjs
141+++ b/test/basic.test.cjs
142 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
143 const OPtokens = require('../open-props.tokens.json')
144
145 test('Should have an all included import', t => {
146- t.is(Object.keys(OpenProps).length, 1642)
147+ t.is(Object.keys(OpenProps).length, 1652)
148 })
149
150 test('Import should have animations', async t => {
151 @@ -24,7 +24,7 @@ test('Import should have colors', async t => {
152 })
153
154 test('JSON Import should have colors', async t => {
155- t.is(Object.keys(OPtokens).length, 434)
156+ t.is(Object.keys(OPtokens).length, 439)
157 t.assert(Object.keys(OPtokens).includes('--orange-0'))
158 })
159