-
Notifications
You must be signed in to change notification settings - Fork 45
/
index.html
162 lines (142 loc) · 6.45 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vivus Instant - inline SVG animation with CSS</title>
<meta name="description" content="Inline SVG Drawing Animation" />
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/form.css">
<link rel="stylesheet" href="style/intro.css">
<link rel="stylesheet" href="style/sidebar.css">
<link rel="stylesheet" href="style/viewer.css">
</head>
<body>
<div class="viewer">
<label class="viewer-switch">
<input type="checkbox" onchange="this.parentNode.parentNode.classList.toggle('dark')">
<span class="checkbox-label" label-off="switch to dark mode" label-on="switch to light mode"></span>
</label>
<div class="alert-error"></div>
<div class="introbox">
<!--
Oh? Why the logo is in an object tag instead of an img?
Let say animated SVGs in img and Firefox aren't getting along...
-->
<object type="image/svg+xml" data="assets/vivus_instant_logo_loop.svg"></object>
<p>Make stroke drawing animation without JavaScript.</p>
<p>Simply <span class="important">drag and drop</span> your stroke based SVG and set your options.
The result will be animated by CSS and ready to export, and used inline or in a <span class="pre"><object></span> tag. <a href="https://github.com/maxwellito/vivus-instant">More information</a></p>
<p>If you want to play with, here is the <a href="assets/vivus_instant_logo.svg" download>un-animated logo</a>.</p>
<p>This is a beta, expect crashes, bananas and explosions (especially on IE/Edge). Also use the amazing <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> to clean your SVG before playing here.</p>
<p class="lookAtMe-lookAtMe-lookAtMe">Drag and drop your SVG here</p>
</div>
</div>
<div class="sidebar">
<div class="sidebar-head">
<img src="assets/vivus_instant_logo_monochrome.svg" alt="">
<p>More help about options on <a href="https://github.com/maxwellito/vivus">Vivus documentation</a></p>
<p><a href="https://github.com/maxwellito/vivus-instant">GitHub</a></p>
</div>
<!-- Oh look! A form -->
<form>
<div class="form-radio">
<input id="form_start_auto" type="radio" name="start" value="autostart" checked="checked" onchange="optionCtrl.updateForm()">
<label for="form_start_auto">Autostart</label>
<input id="form_start_manuel" type="radio" name="start" value="manual" onchange="optionCtrl.updateForm()">
<label for="form_start_manuel">Manual</label>
</div>
<fieldset class="manual-trigger-class-panel">
<label class="form-input-inline">
<span class="label">Trigger class name</span>
<input type="text" name="triggerClass" value="start"/>
</label>
</fieldset>
<fieldset>
<div class="form-input-inline">
<span class="label">Animation type</span>
<select name="type" onchange="optionCtrl.updateForm()">
<option value="delayed" selected="selected">Delayed start</option>
<option value="async">Syncronous</option>
<option value="oneByOne">One By One</option>
<!-- This is not mainstream enough to be released
<option value="script">script</option>
<option value="scenario">scenario</option>
<option value="scenario-sync">scenario-sync</option>
-->
</select>
</div>
<label class="form-input-inline delay-panel">
<span class="label">Delay <span class="label-info">in ms</span></span>
<input type="number" min="0" name="delay" placeholder="auto" step="20"/>
</label>
</fieldset>
<fieldset>
<label class="form-input-inline">
<span class="label">Duration <span class="label-info">in ms</span></span>
<input type="number" min="0" name="duration" value="3000" step="100"/>
</label>
<div class="form-input-inline">
<span class="label">Path timing function</span>
<select name="pathTimingFunction">
<option value="linear" selected="selected">Linear</option>
<option value="ease">Ease</option>
<option value="ease-in">Ease in</option>
<option value="ease-out">Ease out</option>
<option value="ease-in-out">Ease in out</option>
</select>
</div>
</fieldset>
<fieldset>
<label class="form-input-inline">
<span class="label">Loop</span>
<span>
<input type="checkbox" name="loop" onchange="optionCtrl.updateForm()">
<span class="checkbox-label" label-on="on" label-off="off"></span>
</span>
</label>
<div class="control-loop-panel">
<label class="form-input-inline">
<span class="label">Start delay <span class="label-info">in ms</span></span>
<input type="number" name="loopStart" value="800" step="100"/>
</label>
<label class="form-input-inline">
<span class="label">End pause <span class="label-info">in ms</span></span>
<input type="number" name="loopEnd" value="3000" step="100"/>
</label>
<label class="form-input-inline">
<span class="label">Fade duration <span class="label-info">in ms</span></span>
<input type="number" name="loopTransition" value="400" step="100"/>
</label>
</div>
</fieldset>
<button type="button" onclick="optionCtrl.draw()" class="full-width">Update</button>
<button type="button" onclick="optionCtrl.download()" class="full-width" disabled>Download</button>
</form>
</div>
<!-- Le scripts -->
<script src="scripts/stylesheet.js"></script>
<script src="scripts/pathformer.js"></script>
<script src="scripts/vivus.js"></script>
<script src="scripts/ViewerCtrl.js"></script>
<script src="scripts/OptionsCtrl.js"></script>
<script src="scripts/utils.js"></script>
<script>
var viewerCtrl = new ViewerController(document.querySelector('.viewer')),
optionCtrl = new OptionController(document.querySelector('.sidebar'), viewerCtrl);
// Cheap way to inform the user about errors.
var alertBoxTimeout,
alertBox = document.querySelector('.alert-error');
window.onerror = function (msg) {
alertBox.textContent = msg;
alertBox.classList.add('show');
if (!alertBoxTimeout) {
setTimeout(function () {
alertBox.classList.remove('show');
}, 8000);
}
};
</script>
</body>
</html>