{"repo":"hanielu/motion-svelte","free":true,"listed":false,"github":"https://github.com/hanielu/motion-svelte","clone":"git clone https://github.com/hanielu/motion-svelte.git","description":"Framer Motion for Svelte 5","language":"TypeScript","stars":159,"topics":["svelte","animation","framer-motion","motion","motion-svelte","framer-motion-svelte","svelte-5"],"license":"MIT","category":"ui-components","readme_excerpt":"Motion For Svelte This is an attempt to bring a Motion (formerly known as Framer Motion) to Svelte. Documentation This project is based on the Motion for Vue documentation. Quick Start Then import the motion component: Svelte Playground Examples - Directional Nav - Animated Tabs - Drag Direction Locking - Drag to transform - Svg Path Morphing - Animated List Key Differences from Framer Motion Some Framer Motion features cannot be reproduced in Svelte with the same APIs. Layout Animations React uses getSnapshotBeforeUpdate and Vue uses onBeforeUpdate . Svelte has no equivalent, so layout animations require a helper. Enable them using createLayoutMotion : createLayoutMotion provides: - layout.update() — mark a layout change after state updates. - layout.update.with(fn) — wrap a state update so layout changes are tracked automatically. Usage: Use layoutDependency if the element is not being remounted. This gives motion a reactive trigger for the update. --- Layout Animations with layoutId Alternatively, use layoutId to link elements across renders: --- Animate Presence (Enter/Exit) - React : implemented with child diffing. - Vue : uses Transition / TransitionGroup . - Svelte : has no equivalent (issue #8547). Limitations in this port: - Certiain Variants with AnimatePresence (e.g. when ) may not work.","default_branch":null,"files":null,"tree":[],"storefront":"/r/hanielu","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/hanielu/motion-svelte/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}