diff options
Diffstat (limited to 'compat/lustre_animation/index.html')
| -rw-r--r-- | compat/lustre_animation/index.html | 95 |
1 files changed, 0 insertions, 95 deletions
diff --git a/compat/lustre_animation/index.html b/compat/lustre_animation/index.html deleted file mode 100644 index 5d15471..0000000 --- a/compat/lustre_animation/index.html +++ /dev/null @@ -1,95 +0,0 @@ -<html> - -<head> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Lustre Animation Example</title> - <style> - head, - body { - margin: 0; - padding: 1em; - background: linear-gradient(to bottom, #ffaff3, white); - } - </style> - <link rel="stylesheet" href="lustre_animation.css" /> -</head> - -<body> - <script type="text/javascript" src="highlight.js"></script> - <h1>Lustre Animation</h1> - You can use this package within Gleam with - <pre><code class="language-bash">gleam add lustre_animation</code></pre> - You can get the repository with - <pre><code class="no-highlight">git clone https://git.chmeee.org/lustre_animation</code></pre> - <h1>Usage</h1> - The basic usage is - <ol> - <li>keep 1 `Animations` value</li> - <li>add animations by some trigger</li> - <li>call `animation.cmd()` on your value and let your lustre `update()` return it. - This will cause a dispatch on the next JS animation frame, unless all animations have finished (and - auto-removed).</li> - <li>update the animations with the new time.</li> - <li>evaluate for each animation you are interested in.</li> - </ol> - e.g. like this: - <pre><code class="language-gleam">import lustre/animation as a - -pub type Msg { - Trigger - Tick(Float) -} - -pub fn update(model: Model, msg: Msg) { - let m = case msg of { - Trigger -> { - let new_anim = a.add(model.animations, "id", 1.0, 2.0, 0.250) - Model(1.0, animations: new_anim) - } - Tick(t) -> { - let new_anim = a.tick(model.animations, t) - let new_value = a.value(new_anim, "id", model.value) - Model(new_value, new_anim) - } - } - #(m, animation.cmd(m.animations, Tick)) -}</code></pre> - - In the above <code>type Model</code>, <code>init</code> and <code>render</code> have been omitted. - - <h1>Examples</h1> - Below are two working examples, of which the code is in the git repository. - <div style="display: flex; flex-wrap: wrap; overflow-y: auto; overflow-x: hidden;"> - <div style="width: 320; margin-right: 2em;"> - <h2>1. Two independent animations</h2> - <p>Click on the four buttons to manipulate the text horizontally, - and vertically.</p> - <p>See <code>./test/example_move_around.gleam</code></p> - <div id="root" - style="width: calc(320px - 2em); height: 480; border: 2px solid grey; padding: 0 1em 1em 1em;"> - <h1>Lustre Animation Example</h1> - Please wait for the JavaScript (compiled Gleam) to take over. - <noscript> - <p>This site needs JavaScript to run, please enable/allow it.</p> - </noscript> - </div> - </div> - - <div style="width: 320;"> - <h2>2. Many animations that are all 'the same'</h2> - <p>Each drop behaves in the same way. Click in the area to generate them.</p> - <p>See <code>./test/example_drops.gleam</code></p> - <div id="drops" style="width: calc(320px - 2em); height: 480; border: 2px solid grey; padding: 1em;"> - <h1>Lustre Animation Example</h1> - Please wait for the JavaScript (compiled Gleam) to take over. - <noscript> - <p>This site needs JavaScript to run, please enable/allow it.</p> - </noscript> - </div> - </div> - </div> - <script type="text/javascript" src="run_highlight.js"></script> - <script src="./test/start_examples.mjs" type="module"></script> -</body> - -</html> |