Skip to content

Commit 29d07d1

Browse files
jonfroehlichjonfroehlich
committed
Added lots of diff animation controls
1 parent 4efbaae commit 29d07d1

File tree

4 files changed

+465
-41
lines changed

4 files changed

+465
-41
lines changed

‎src/apps/makelogo/TriangleArtMorphTest2-MorphLib/index.html‎

Lines changed: 87 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,19 +8,93 @@
88
</head>
99
<body>
1010
<div id="controls">
11-
<label for="shapeSelect">Start shape:</label>
12-
<select id="shapeSelect">
13-
<option value="">Random Explosion</option>
14-
<option value="../../../lib/logo/art_data/heart.json">Heart (Valentine's Day)</option>
15-
<option value="../../../lib/logo/art_data/shamrock.json">Shamrock (St. Patrick's Day)</option>
16-
<option value="../../../lib/logo/art_data/jack-o-lantern.json">Jack-O-Lantern (Halloween)</option>
17-
<option value="../../../lib/logo/art_data/pumpkin.json">Pumpkin (Halloween)</option>
18-
<option value="../../../lib/logo/art_data/santa.json">Santa (Christmas)</option>
19-
<option value="../../../lib/logo/art_data/uw.json">UW Purple W</option>
20-
</select>
21-
<label for="showMessage" style="margin-left: 12px;">
22-
<input type="checkbox" id="showMessage" checked> Show message
23-
</label>
11+
<div class="control-row">
12+
<label for="shapeSelect">Start shape</label>
13+
<select id="shapeSelect">
14+
<option value="">Random Explosion</option>
15+
<option value="../../../lib/logo/art_data/heart.json">Heart (Valentine's Day)</option>
16+
<option value="../../../lib/logo/art_data/shamrock.json">Shamrock (St. Patrick's Day)</option>
17+
<option value="../../../lib/logo/art_data/jack-o-lantern.json">Jack-O-Lantern (Halloween)</option>
18+
<option value="../../../lib/logo/art_data/pumpkin.json">Pumpkin (Halloween)</option>
19+
<option value="../../../lib/logo/art_data/santa.json">Santa (Christmas)</option>
20+
<option value="../../../lib/logo/art_data/uw.json">UW Purple W</option>
21+
</select>
22+
</div>
23+
24+
<hr class="divider">
25+
26+
<fieldset class="control-row drive-mode-fieldset">
27+
<legend>Drive mode</legend>
28+
<div class="radio-group">
29+
<label class="radio-label">
30+
<input type="radio" name="driveMode" value="mouse" checked>
31+
Mouse
32+
</label>
33+
<label class="radio-label">
34+
<input type="radio" name="driveMode" value="playback">
35+
Playback
36+
</label>
37+
</div>
38+
</fieldset>
39+
40+
<hr class="divider">
41+
42+
<div id="playbackControls">
43+
<div class="control-row">
44+
<label for="directionSelect">Direction</label>
45+
<select id="directionSelect">
46+
<option value="artToLogo" selected>Art &rarr; Logo</option>
47+
<option value="logoToArt">Logo &rarr; Art</option>
48+
</select>
49+
</div>
50+
51+
<div class="control-row">
52+
<label for="easingSelect">Easing</label>
53+
<select id="easingSelect">
54+
<option value="easeOutCubic" selected>Ease Out Cubic</option>
55+
<option value="easeOutQuad">Ease Out Quad</option>
56+
<option value="easeInCubic">Ease In Cubic</option>
57+
<option value="easeInOutCubic">Ease In-Out Cubic</option>
58+
<option value="linear">Linear</option>
59+
</select>
60+
</div>
61+
62+
<div class="control-row">
63+
<label for="durationRange">Duration</label>
64+
<div class="range-with-value">
65+
<input type="range" id="durationRange" min="0.5" max="8" step="0.5" value="3">
66+
<span id="durationValue">3s</span>
67+
</div>
68+
</div>
69+
70+
<div class="control-row">
71+
<label for="pauseRange">Pause at ends</label>
72+
<div class="range-with-value">
73+
<input type="range" id="pauseRange" min="0" max="3" step="0.25" value="1">
74+
<span id="pauseValue">1s</span>
75+
</div>
76+
</div>
77+
78+
<div class="control-row">
79+
<button id="playBtn" aria-label="Play animation">&#9654; Play</button>
80+
</div>
81+
82+
<div class="control-row">
83+
<label class="checkbox-label" for="repeatCheck">
84+
<input type="checkbox" id="repeatCheck">
85+
Repeat (ping-pong)
86+
</label>
87+
</div>
88+
</div>
89+
90+
<hr class="divider">
91+
92+
<div class="control-row">
93+
<label class="checkbox-label" for="showMessage">
94+
<input type="checkbox" id="showMessage" checked>
95+
Show message
96+
</label>
97+
</div>
2498
</div>
2599

26100
<div class="container">

0 commit comments

Comments
 (0)