7 | @rootenginear/svelte-action-motionone 8 |
9 | 10 | 64 | 65 |
23 | 
36 | 
49 | 
62 | 66 | Unofficial Svelte Action 71 | for 72 | Motion One animation 73 | library 74 |
75 | 76 |9 | To improve code readability, you can extract animation options into a file somewhere in your 10 | utils or as a const in the script section, then reusing them in the template. This will help you 11 | to avoid animation options plaguing in the template. 12 |
13 | 14 |
15 | If you are using TypeScript, you can import InViewActionParams,
16 | ScrollActionParams, HoverActionParams and
17 | PressActionParams to type your option object.
18 |
22 | import { inView, type InViewActionParams } from '@rootenginear/svelte-action-motionone';
23 | import { animate } from 'motion';
24 |
25 | const fadeInView = [
26 | (el) => {
27 | animate(el, { opacity: [0, 1] });
28 | },
29 | { amount: 1 }
30 | ] satisfies InViewActionParams;
31 |
32 |
33 |
37 | Hello!
38 | `}
39 | />
40 |
41 |
42 | Gotcha: If your animation option is reactive, meaning that you will
43 | enable/disable it or switch to other animation, it should be in a
44 | reactive statement
49 | (or Svelte 5
50 | $derived).
55 |
56 |
57 |
59 | import { inView, type InViewActionParams } from '@rootenginear/svelte-action-motionone';
60 | import { animate } from 'motion';
61 | import { onMount } from 'svelte';
62 |
63 | let isUserPreferringReducedMotion = true;
64 |
65 | onMount(() => {
66 | window.matchMedia('(prefers-reduced-motion)').addEventListener('change', (e) => {
67 | isUserPreferringReducedMotion = e.matches;
68 | });
69 | });
70 |
71 | $: fadeInView = (
72 | isUserPreferringReducedMotion
73 | ? [() => {}]
74 | : [
75 | (el) => {
76 | animate(el, { opacity: [0, 1] });
77 | },
78 | { amount: 1 }
79 | ]
80 | ) satisfies InViewActionParams;
81 |
82 |
83 |
87 | Hello!
88 |
89 | `}
90 | />
91 | use:containerScroll
12 | Watch the scroll of that element. use:containerScroll is a shortcut for:
13 |
[/* ... */, { container: node }]} />`}>
16 |
17 | [
41 | animate(node.children[0], {
42 | backgroundColor: ['#FF4136', '#FFDC00']
43 | }),
44 | {
45 | axis: 'x'
46 | }
47 | ]}
48 | style="overflow-x:auto;user-select:none"
49 | >
50 |
51 | Scroll Me! → Lorem ipsum dolor sit amet consectetur, adipisicing
52 | elit. Incidunt provident odit voluptatibus magni quae autem unde sed libero voluptatum, et quibusdam
53 | tempore voluptas harum natus cum mollitia soluta perferendis ut.
54 |
55 | `}
56 | />
57 | 16 | https://motion.dev/docs/stagger 19 |20 | 21 |
{
44 | animate(
45 | [...el.children],
46 | { scale: [0, 1] },
47 | { duration: 0.5, delay: stagger(0.2), type: spring, bounce: 0.3 }
48 | );
49 | }
50 | ]}
51 | >
52 |
53 |
54 |
55 |
56 | `}
57 | />
58 |
59 | Timeline Sequences
60 |
61 |
62 | https://motion.dev/docs/animate#timeline-sequences
67 |
68 |
69 | {
73 | const children = [...el.children];
74 |
75 | animate([
76 | [children[0], { y: [100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
77 | [children[1], { rotate: [90, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
78 | [children[2], { x: [-100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
79 | [children[3], { scale: [0, 1], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }]
80 | ]);
81 | }
82 | ]}
83 | >
84 |
85 |
86 |
87 |
88 |
89 |
90 | {
95 | const children = [...el.children];
96 |
97 | animate([
98 | [children[0], { y: [100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
99 | [children[1], { rotate: [90, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
100 | [children[2], { x: [-100, 0], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }],
101 | [children[3], { scale: [0, 1], opacity: [0, 100] }, { duration: 0.5, at: '-0.3' }]
102 | ]);
103 | }
104 | ]}
105 | >
106 |
107 |
108 |
109 |
110 | `}
111 | />
112 |
113 | Enable/Disable Animation
114 |
115 |
116 |
117 | [
120 | animate(node.children[1], {
121 | rotate: [0, 360],
122 | x: ['-50%', '-50%'],
123 | y: ['-50%', '-50%']
124 | }),
125 | {
126 | axis: 'x'
127 | }
128 | ]
129 | : [() => {}]}
130 | style="overflow-x:auto;user-select:none;position:relative"
131 | use:dragscroll
132 | >
133 |
134 |
137 |
138 |
139 |
141 | let enabled = true;
142 |
143 |
144 |
145 |
146 | [
149 | animate(node.children[1], {
150 | rotate: [0, 360],
151 | x: ['-50%', '-50%'],
152 | y: ['-50%', '-50%']
153 | }),
154 | {
155 | axis: 'x'
156 | }
157 | ]
158 | : [() => {}]}
159 | style="overflow-x:auto;user-select:none;position:relative"
160 | >
161 |
162 |
165 | `}
166 | />
167 |
168 | You can use this to change/disable the animation to user preference.
169 |
170 |
172 | import { onMount } from 'svelte';
173 |
174 | let isUserPreferringReducedMotion = true;
175 |
176 | onMount(() => {
177 | window.matchMedia('(prefers-reduced-motion)').addEventListener('change', (e) => {
178 | isUserPreferringReducedMotion = e.matches;
179 | });
180 | });
181 |
182 |
183 | `}
184 | />
185 | 66 | Unofficial Svelte Action 71 | for 72 | Motion One animation 73 | library 74 |
75 | 76 |use:hover11 | https://motion.dev/docs/hover 14 |15 | 16 |
{
32 | animate(el, { scale: 0.8 }, { type: spring, bounce: 0.6, duration: 0.5 });
33 | return () => animate(el, { scale: 1 }, { type: spring, bounce: 0.6, duration: 0.5 });
34 | }
35 | ]}
36 | style="background:#FF4136;padding:16px;border-radius:16px;text-align:center;font-size:32px;font-weight:bold;user-select:none"
37 | >
38 | Hover me!
39 | `}
40 | />
41 | use:inView11 | https://motion.dev/docs/inview 14 |15 | 16 |
{
40 | animate(
41 | el,
42 | { scale: [0, 1], opacity: [0, 1] },
43 | {
44 | type: spring,
45 | bounce: 0.3,
46 | duration: 1
47 | }
48 | );
49 | },
50 | { amount: 1 }
51 | ]}
52 | style="background:#FFDC00;padding:16px;border-radius:16px;text-align:center;font-size:32px;font-weight:bold"
53 | >
54 | Hello!
55 | `}
56 | />
57 | 9 | Basically it's the same for Motion, just omit the node and passing other parameters as an array. 10 |
11 | 12 |
32 | You can also pass other parameters as a function that accepts node as
33 | an argument. You can use node to reference the action's DOM node.
34 |
[onStart, options]} />
38 | [onPressStart, options]} />
39 | [onHoverStart, options]} />
40 | [onScroll, options]} />`}
41 | />
42 |
43 | Compatibility: Svelte 4, Motion 12
44 |
45 |
--------------------------------------------------------------------------------
/src/components/Sections/Press.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | use:press
9 |
10 |
11 | https://motion.dev/docs/press
14 |
15 |
16 | {
19 | animate(el, { scale: 0.8 });
20 | return () => animate(el, { scale: 1 }, { type: spring, bounce: 0.6, duration: 0.5 });
21 | }
22 | ]}
23 | style="background:#FFDC00;padding:16px;border-radius:16px;text-align:center;font-size:32px;font-weight:bold;user-select:none"
24 | >
25 | Press me!
26 |
27 |
28 | {
32 | animate(el, { scale: 0.8 });
33 | return () => animate(el, { scale: 1 }, { type: spring, bounce: 0.6, duration: 0.5 });
34 | }
35 | ]}
36 | style="background:#FFDC00;padding:16px;border-radius:16px;text-align:center;font-size:32px;font-weight:bold;user-select:none"
37 | >
38 | Press me!
39 | `}
40 | />
41 |
42 |
--------------------------------------------------------------------------------
/src/components/Sections/Scroll.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | use:scroll
9 |
10 |
11 | https://motion.dev/docs/scroll
14 |
15 |
16 | [
19 | animate(node, { transform: ['scaleX(0)', 'scaleX(1)'] }, { ease: 'linear' })
20 | ]}
21 | style="position:fixed;top:0;left:0;width:100%;height:4px;z-index:50;background:#FF4136;transform-origin:left"
22 | />`}
23 | />
24 |
25 | [
27 | animate(node, { transform: ['scaleX(0)', 'scaleX(1)'] }, { ease: 'linear' })
28 | ]}
29 | style="position:fixed;top:0;left:0;width:100%;height:4px;z-index:50;background:#FF4136;transform-origin:left"
30 | />
31 |
32 | You can see the example at the top of the page (the progress bar!)
33 |
34 |
--------------------------------------------------------------------------------
/src/components/Sections/ScrollInView.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 | use:scrollInView
9 |
10 |
11 | Watch the progress of that element in viewport. use:scrollInView is a shortcut
12 | for:
13 |
14 |
15 | [/* ... */, { target: node }]} />`}>
16 |
17 | Example
18 |
19 | [
21 | animate(node, { scale: [0, 1, 0] }),
22 | {
23 | offset: ['0 1', '1 0']
24 | }
25 | ]}
26 | style="background:#FFDC00;padding:16px;border-radius:16px;text-align:center;font-size:32px;font-weight:bold"
27 | >
28 | Ooh!
29 |
30 |
31 | [
34 | animate(node, { scale: [0, 1, 0] }),
35 | {
36 | offset: ['0 1', '1 0']
37 | }
38 | ]}
39 | style="background:#FFDC00;padding:16px;border-radius:16px;text-align:center;font-size:32px;font-weight:bold"
40 | >
41 | Ooh!
42 | `}
43 | />
44 |
45 |
--------------------------------------------------------------------------------
/src/components/Sections/TableOfContents.svelte:
--------------------------------------------------------------------------------
1 |
2 | Table of Contents
3 |
4 |
5 | - The Idea
6 | - use:inView
7 | - use:scroll
8 | - use:containerScroll
9 | - use:scrollInView
10 | - use:hover
11 | - use:press
12 | -
13 | More Examples
14 |
15 | - Staggered Animation
16 | - Timeline Sequences
17 | - Enable/Disable Animation
18 |
19 |
20 | - Best Practices
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/lib/actions/hover.ts:
--------------------------------------------------------------------------------
1 | import { hover as motionHover } from 'motion';
2 | import type { Action } from 'svelte/action';
3 |
4 | type HoverParams =
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | Parameters extends [infer _, ...infer Params] ? Params : never;
7 |
8 | export type HoverActionParams = HoverParams | ((node: HTMLElement) => HoverParams);
9 |
10 | const createHover = (node: HTMLElement) => (params: HoverActionParams) => {
11 | const [onHoverStart, options] = typeof params === 'function' ? params(node) : params;
12 | return motionHover(node, onHoverStart, options);
13 | };
14 |
15 | export const hover: Action = (node, params) => {
16 | const instanceHover = createHover(node);
17 | let stop = instanceHover(params);
18 |
19 | return {
20 | update(params) {
21 | stop();
22 | stop = instanceHover(params);
23 | },
24 | destroy() {
25 | stop();
26 | }
27 | };
28 | };
29 |
--------------------------------------------------------------------------------
/src/lib/actions/inView.ts:
--------------------------------------------------------------------------------
1 | import { inView as motionInView } from 'motion';
2 | import type { Action } from 'svelte/action';
3 |
4 | type InViewParams =
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | Parameters extends [infer _, ...infer Params] ? Params : never;
7 |
8 | export type InViewActionParams = InViewParams | ((node: HTMLElement) => InViewParams);
9 |
10 | const createInView = (node: HTMLElement) => (params: InViewActionParams) => {
11 | const [onStart, options] = typeof params === 'function' ? params(node) : params;
12 | return motionInView(node, onStart, options);
13 | };
14 |
15 | export const inView: Action = (node, params) => {
16 | const instanceInView = createInView(node);
17 | let stop = instanceInView(params);
18 |
19 | return {
20 | update(params) {
21 | stop();
22 | stop = instanceInView(params);
23 | },
24 | destroy() {
25 | stop();
26 | }
27 | };
28 | };
29 |
--------------------------------------------------------------------------------
/src/lib/actions/press.ts:
--------------------------------------------------------------------------------
1 | import { press as motionPress } from 'motion';
2 | import type { Action } from 'svelte/action';
3 |
4 | type PressParams =
5 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
6 | Parameters extends [infer _, ...infer Params] ? Params : never;
7 |
8 | export type PressActionParams = PressParams | ((node: HTMLElement) => PressParams);
9 |
10 | const createPress = (node: HTMLElement) => (params: PressActionParams) => {
11 | const [onPressStart, options] = typeof params === 'function' ? params(node) : params;
12 | return motionPress(node, onPressStart, options);
13 | };
14 |
15 | export const press: Action = (node, params) => {
16 | const instancePress = createPress(node);
17 | let stop = instancePress(params);
18 |
19 | return {
20 | update(params) {
21 | stop();
22 | stop = instancePress(params);
23 | },
24 | destroy() {
25 | stop();
26 | }
27 | };
28 | };
29 |
--------------------------------------------------------------------------------
/src/lib/actions/scroll.ts:
--------------------------------------------------------------------------------
1 | import { scroll as motionScroll } from 'motion';
2 | import type { Action } from 'svelte/action';
3 |
4 | export type ScrollParams = Parameters;
5 |
6 | export type ScrollActionParams = ScrollParams | ((node: HTMLElement) => ScrollParams);
7 |
8 | const createScroll = (node: HTMLElement) => (params: ScrollActionParams) => {
9 | const [onScroll, options] = typeof params === 'function' ? params(node) : params;
10 | return motionScroll(onScroll, options);
11 | };
12 |
13 | export const scroll: Action = (node, params) => {
14 | const instanceScroll = createScroll(node);
15 | let stop = instanceScroll(params);
16 |
17 | return {
18 | update(params) {
19 | stop();
20 | stop = instanceScroll(params);
21 | },
22 | destroy() {
23 | stop();
24 | }
25 | };
26 | };
27 |
28 | const createContainerScroll = (node: HTMLElement) => (params: ScrollActionParams) => {
29 | const [onScroll, options] = typeof params === 'function' ? params(node) : params;
30 | return motionScroll(onScroll, {
31 | ...options,
32 | container: options?.container ?? node
33 | });
34 | };
35 |
36 | export const containerScroll: Action = (node, params) => {
37 | const instanceScroll = createContainerScroll(node);
38 | let stop = instanceScroll(params);
39 |
40 | return {
41 | update(params) {
42 | stop();
43 | stop = instanceScroll(params);
44 | },
45 | destroy() {
46 | stop();
47 | }
48 | };
49 | };
50 |
51 | const createScrollInView = (node: HTMLElement) => (params: ScrollActionParams) => {
52 | const [onScroll, options] = typeof params === 'function' ? params(node) : params;
53 | return motionScroll(onScroll, {
54 | ...options,
55 | target: options?.target ?? node
56 | });
57 | };
58 |
59 | export const scrollInView: Action = (node, params) => {
60 | const instanceScroll = createScrollInView(node);
61 | let stop = instanceScroll(params);
62 |
63 | return {
64 | update(params) {
65 | stop();
66 | stop = instanceScroll(params);
67 | },
68 | destroy() {
69 | stop();
70 | }
71 | };
72 | };
73 |
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export * from './actions/hover.js';
2 | export * from './actions/inView.js';
3 | export * from './actions/press.js';
4 | export * from './actions/scroll.js';
5 |
--------------------------------------------------------------------------------
/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | export const prerender = true;
2 |
--------------------------------------------------------------------------------
/src/routes/+page.svelte:
--------------------------------------------------------------------------------
1 |
15 |
16 |