@humanspeak/svelte-motion
Version:
Framer Motion for Svelte 5. Declarative motion.<tag> components with AnimatePresence exit animations, gestures (hover, tap, drag, focus, in-view), variants, FLIP layout animations, shared-layout transitions, spring physics, and scroll-linked motion values
39 lines (38 loc) • 1.16 kB
JavaScript
/**
* Subscribes to a Svelte store and fires a callback on every *change*,
* skipping the initial synchronous emission that Svelte stores produce
* on subscribe.
*
* Returns an unsubscribe function. Use inside `$effect` or `onDestroy`
* for automatic cleanup.
*
* @example
* ```svelte
* <script>
* import { useMotionValueEvent, useSpring } from '@humanspeak/svelte-motion'
* import { onDestroy } from 'svelte'
*
* const x = useSpring(0)
* const unsub = useMotionValueEvent(x, 'change', (latest) => {
* console.log('x changed to', latest)
* })
* onDestroy(unsub)
* </script>
* ```
*
* @param store A readable Svelte store to observe.
* @param event The event type — currently only `'change'` is supported.
* @param callback Invoked with the latest value on each change after the initial emission.
* @returns An unsubscribe function.
*/
export const useMotionValueEvent = (store, event, callback) => {
let initialized = false;
const unsub = store.subscribe((value) => {
if (!initialized) {
initialized = true;
return;
}
callback(value);
});
return unsub;
};