diff options
| author | Hayleigh Thompson <me@hayleigh.dev> | 2023-08-23 22:59:02 +0100 |
|---|---|---|
| committer | Hayleigh Thompson <me@hayleigh.dev> | 2023-08-23 22:59:02 +0100 |
| commit | 21d59712dd56909293b3804b1d89320216f6906a (patch) | |
| tree | 06300d54c0e5c2804f80167967c40f5371011401 /compat/lustre_animation/index.html | |
| parent | 83962575c255cc3b58677d18262a1d7b18e8239d (diff) | |
| download | lustre-21d59712dd56909293b3804b1d89320216f6906a.tar.gz lustre-21d59712dd56909293b3804b1d89320216f6906a.zip | |
:ambulance: Update third-party lustre_animation package to new api.
Diffstat (limited to 'compat/lustre_animation/index.html')
| -rw-r--r-- | compat/lustre_animation/index.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/compat/lustre_animation/index.html b/compat/lustre_animation/index.html new file mode 100644 index 0000000..5d15471 --- /dev/null +++ b/compat/lustre_animation/index.html @@ -0,0 +1,95 @@ +<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> |