From 92e8596b78982885803994b50c6b35f73f7a403e Mon Sep 17 00:00:00 2001 From: Hayleigh Thompson Date: Tue, 19 Sep 2023 23:40:03 +0100 Subject: :recycle: So long monorepo. --- compat/lustre_animation/index.html | 95 -------------------------------------- 1 file changed, 95 deletions(-) delete mode 100644 compat/lustre_animation/index.html (limited to 'compat/lustre_animation/index.html') 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 @@ - - - - - Lustre Animation Example - - - - - - -

Lustre Animation

- You can use this package within Gleam with - 
gleam add lustre_animation
- You can get the repository with - 
git clone https://git.chmeee.org/lustre_animation
-

Usage

- The basic usage is -
    -
  1. keep 1 `Animations` value
    2. -
  2. add animations by some trigger
    3. -
  3. 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).
    4. -
  4. update the animations with the new time.
    5. -
  5. evaluate for each animation you are interested in.
    6. -
- e.g. like this: - 
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))
-}
- - In the above type Model, init and render have been omitted. - -

Examples

- Below are two working examples, of which the code is in the git repository. -
-
-

1. Two independent animations

-

Click on the four buttons to manipulate the text horizontally, - and vertically.

-

See ./test/example_move_around.gleam

-
-

Lustre Animation Example

- Please wait for the JavaScript (compiled Gleam) to take over. - -
-
- -
-

2. Many animations that are all 'the same'

-

Each drop behaves in the same way. Click in the area to generate them.

-

See ./test/example_drops.gleam

-
-

Lustre Animation Example

- Please wait for the JavaScript (compiled Gleam) to take over. - -
-
-
- - - - - -- cgit v1.2.3