@luna-park/plugin-motion 1.0.4 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -94
- package/dist/index.js +1824 -1642
- package/dist/runtime-_rbH5H1J.js +2639 -0
- package/dist/runtime.js +2 -2
- package/package.json +3 -2
- package/dist/runtime-DRrnUtwZ.js +0 -2003
package/README.md
CHANGED
|
@@ -1,94 +1,124 @@
|
|
|
1
|
-
# 🪄 Motion plugin for Luna Park
|
|
2
|
-
|
|
3
|
-
**Animate any element of your app** (entrances, hover effects, scroll reveals, looping details) from a single **Motion** panel in the inspector, without writing a line of animation code.
|
|
4
|
-
|
|
5
|
-
Powered by [anime.js](https://animejs.com), and what you see in the editor preview is exactly what runs once deployed.
|
|
6
|
-
|
|
7
|
-
## ✨ What you get
|
|
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
|
-
| **On
|
|
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
|
-
|
|
1
|
+
# 🪄 Motion plugin for Luna Park
|
|
2
|
+
|
|
3
|
+
**Animate any element of your app** (entrances, hover effects, scroll reveals, looping details) from a single **Motion** panel in the inspector, without writing a line of animation code.
|
|
4
|
+
|
|
5
|
+
Powered by [anime.js](https://animejs.com), and what you see in the editor preview is exactly what runs once deployed.
|
|
6
|
+
|
|
7
|
+
## ✨ What you get
|
|
8
|
+
|
|
9
|
+
| | |
|
|
10
|
+
|---|---|
|
|
11
|
+
| 🎬 **18 ready-made presets** | Enter, emphasis and ambient animations, one click away. |
|
|
12
|
+
| 🔢 **Count-up** | Numbers count up from 0 (e.g. `0 → 4.9`) when they appear, or as you scroll. |
|
|
13
|
+
| 🌄 **Scroll-linked & parallax** | Tie any animation to the scroll position, stopping at the center of the page or continuing past it. |
|
|
14
|
+
| 🧈 **Smooth scroll** | Lenis-powered inertia scrolling for the whole app, in one switch. |
|
|
15
|
+
| 🎛️ **Custom from/to** | Animate opacity, position, scale, rotation and blur between your own values. |
|
|
16
|
+
| 🎯 **7 triggers** | On mount, when visible, synced with scroll, on hover, on press, on focus, or driven by a state. |
|
|
17
|
+
| 🌊 **Stagger** | Cascade the animation over children, over sibling elements (lists!), from the first, last, center or at random. |
|
|
18
|
+
| 🔤 **Split text** | Animate a text letter by letter, word by word, or line by line. |
|
|
19
|
+
| ♿ **Reduced motion** | Respects the visitor's `prefers-reduced-motion` setting out of the box. |
|
|
20
|
+
|
|
21
|
+
## 🚀 Getting started
|
|
22
|
+
|
|
23
|
+
1. In Luna Park, open **Library → Install Plugins**, search for **Motion** and install it.
|
|
24
|
+
2. Select an element and open the **Motion** panel in the inspector.
|
|
25
|
+
3. Pick a **trigger**, an **animation** and an **easing**. Hit **Replay** (↺) in the panel header to watch it again.
|
|
26
|
+
|
|
27
|
+
## 🎬 Presets
|
|
28
|
+
|
|
29
|
+
| Category | Presets | Typical use |
|
|
30
|
+
|---|---|---|
|
|
31
|
+
| **Enter** | `fade`, `slide-up`, `slide-down`, `slide-left`, `slide-right`, `zoom`, `blur`, `count` | Make an element appear (on mount, when scrolled into view…). |
|
|
32
|
+
| **Emphasis** | `grow`, `shrink`, `lift`, `tilt` | Small feedback on interaction, best with hover, press, focus or state. |
|
|
33
|
+
| **Ambient** | `pulse`, `float`, `spin`, `shake`, `blink`, `wiggle` | Loop forever to draw attention. |
|
|
34
|
+
| **Custom** | `custom` | Animate from your **From** values to your **To** values (`opacity`, `x`, `y`, `scale`, `rotate`, `blur`). |
|
|
35
|
+
|
|
36
|
+
## 🎯 Triggers
|
|
37
|
+
|
|
38
|
+
| Trigger | Behavior |
|
|
39
|
+
|---|---|
|
|
40
|
+
| **On mount** | Plays as soon as the element appears. |
|
|
41
|
+
| **When visible** | Plays once, the first time the element scrolls into view. |
|
|
42
|
+
| **Synced with scroll** | Progress follows the scroll position, between the moment the element enters the screen and the moment it reaches the **Scroll target**. See [Scroll options](#-scroll-options). |
|
|
43
|
+
| **On hover** | Plays when the pointer enters, rewinds when it leaves. |
|
|
44
|
+
| **On press** | Plays while the element is pressed, rewinds on release. |
|
|
45
|
+
| **On focus** | Plays when the element (or one of its children) gets focus, rewinds when it loses it. |
|
|
46
|
+
| **From a state** | Bind **State** to a boolean: `true` plays the animation, `false` rewinds it. The initial value is applied without animating. |
|
|
47
|
+
|
|
48
|
+
## 🎛️ Options
|
|
49
|
+
|
|
50
|
+
| Option | What it does |
|
|
51
|
+
|---|---|
|
|
52
|
+
| **Duration** / **Delay** | In milliseconds. Duration falls back to the plugin default. |
|
|
53
|
+
| **Easing** | `linear`, `outQuad`, `outCubic`, `outExpo`, `inOutSine`, `outBack`, `outElastic`, `outBounce`. |
|
|
54
|
+
| **Loops** | Number of repetitions, `-1` for infinite. Ambient presets loop by default. |
|
|
55
|
+
| **Alternate** | Play back and forth instead of restarting each loop. |
|
|
56
|
+
| **Stagger** | Delay between each animated item, in milliseconds. |
|
|
57
|
+
| **Stagger from** | Where the cascade starts: `first`, `center`, `last` or `random`. |
|
|
58
|
+
| **Scroll anchor** / **Scroll target** / **Scroll mode** | With **Synced with scroll**, see [Scroll options](#-scroll-options). |
|
|
59
|
+
| **Split text** | Split the element's text into `chars`, `words` or `lines` and animate each piece (with a 30 ms stagger by default). |
|
|
60
|
+
|
|
61
|
+
> [!TIP]
|
|
62
|
+
> **Count** animates the first number found in the element's text, keeping what surrounds it: `4.9★`, `$1,200`, `+87%`. Decimals and thousands separators are kept. Set **Count from** to start from another value.
|
|
63
|
+
>
|
|
64
|
+
> **Parallax**: pick **Synced with scroll**, **Continue past target** and a **Custom** animation with **From → Y** set to e.g. `100px`. The element is `100px` low when it enters, in place at the target, and keeps rising at the same pace afterwards, so it moves faster than the page. Use a negative value to make it lag behind, like a background. **Continue past target** uses `linear` easing unless you pick one.
|
|
65
|
+
|
|
66
|
+
> [!TIP]
|
|
67
|
+
> **Stagger** adapts to what you put it on:
|
|
68
|
+
> - On a **single element**, its children are animated one after the other. Children added later are animated too.
|
|
69
|
+
> - On **repeated siblings** sharing the same motion (e.g. a list rendered from an array), the siblings cascade together. With **When visible**, they are revealed in order as they come into view.
|
|
70
|
+
|
|
71
|
+
## 📜 Scroll options
|
|
72
|
+
|
|
73
|
+
With the **Synced with scroll** trigger, the animation is tied to where the element is on the screen. Positions are measured from the top of the screen: `0%` is the top, `100%` the bottom.
|
|
74
|
+
|
|
75
|
+
| Option | Default | What it does |
|
|
76
|
+
|---|---|---|
|
|
77
|
+
| **Scroll anchor** | `Top` | Edge of the element (`Top` or `Center`) that starts the animation when it enters at the bottom of the screen, and that has to reach the target. |
|
|
78
|
+
| **Scroll target** | `50%` | Screen position where the animation ends. |
|
|
79
|
+
| **Scroll mode** | `Stop at target` | What happens once the target is reached (see below). |
|
|
80
|
+
|
|
81
|
+
| Mode | Behavior |
|
|
82
|
+
|---|---|
|
|
83
|
+
| **Stop at target** | Holds the end state until the element leaves. |
|
|
84
|
+
| **Continue past target** | Keeps going at the same pace past the target, up to 4 times the entry distance. Count-up and ambient presets stop at the target instead. |
|
|
85
|
+
| **Hold, then reverse** | A dead zone: the animation is done once the anchor reaches `max(target, 100 − target)`, holds until the opposite edge (bottom for `Top`, center for `Center`) reaches `min(target, 100 − target)`, then plays back as the element leaves. With `30%`, it holds between `70%` and `30%`. With `50%`, it peaks at the center. |
|
|
86
|
+
|
|
87
|
+
With the defaults, the animation starts when the top of the element appears and ends when that top is at the center of the screen.
|
|
88
|
+
|
|
89
|
+
## ⚙️ Settings
|
|
90
|
+
|
|
91
|
+
| Setting | Default | What it does |
|
|
92
|
+
|---|---|---|
|
|
93
|
+
| **Default duration (ms)** | `600` | Used by every animation without its own duration. |
|
|
94
|
+
| **Default easing** | `outExpo` | Used by every animation without its own easing (ambient presets have their own). |
|
|
95
|
+
| **Smooth scroll** | `false` | Smooth the scroll of the whole app with [Lenis](https://lenis.darkroom.engineering). |
|
|
96
|
+
| **Smooth scroll intensity** | `0.1` | Lenis `lerp`, between `0.01` and `1`. Lower is smoother. |
|
|
97
|
+
| **Reduced motion** | `reduce` | With `reduce`, visitors who prefer reduced motion get instant transitions, no delays, no looping or scroll-synced animations, and no smooth scroll. Use `ignore` to always play everything. |
|
|
98
|
+
|
|
99
|
+
## 📦 In your deployed app
|
|
100
|
+
|
|
101
|
+
When you build your project:
|
|
102
|
+
|
|
103
|
+
- **Runtime**: the plugin and `animejs` are added to your frontend dependencies automatically.
|
|
104
|
+
- **Directive**: animated elements use the `v-motion` directive from `@luna-park/plugin-motion/runtime`.
|
|
105
|
+
- **Configuration**: the plugin settings are applied when the app starts.
|
|
106
|
+
- **Smooth scroll**: when enabled, the app is wrapped in the `MotionScroll` component.
|
|
107
|
+
|
|
108
|
+
## 🛠️ Development
|
|
109
|
+
|
|
110
|
+
```bash
|
|
111
|
+
pnpm install
|
|
112
|
+
pnpm build # build the plugin
|
|
113
|
+
pnpm dev # rebuild on change
|
|
114
|
+
pnpm preview # serve it to the Luna Park editor (http://127.0.0.1:2084)
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
The package ships two entries:
|
|
118
|
+
|
|
119
|
+
- `@luna-park/plugin-motion`: the editor plugin (settings and Motion panel).
|
|
120
|
+
- `@luna-park/plugin-motion/runtime`: the browser runtime used by the generated app (`vMotion`, `MotionScroll`, `configureMotion`, `replayMotion`, `presets`).
|
|
121
|
+
|
|
122
|
+
---
|
|
123
|
+
|
|
124
|
+
Made with 💙 by [Luna Park](https://luna-park.app).
|