# 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](https://motion.dev/docs/vue) documentation.

## Quick Start

```bash
npm install motion-sv
```

Then import the `motion` component:

```svelte
<script lang="ts">
	import { motion } from "motion-sv";
</script>

<motion.div animate={{ x: 100 }}>Hello</motion.div>
```

## Svelte Playground Examples

- [Directional Nav](https://svelte.dev/playground/hello-world?version=5.46.0#H4sIAAAAAAAAE51VbW_bNhD-Kwe2H2zAtCXHqV9qeWizDR2QbgWS7cPCYKUk2uZKkwJ5sp1q_u8D9WJLaVAMg76ID4_Hu-eeOxZE850gC_JBKGXgYKxKoSdSiSLtkwFZSyUcWTwUBJ8yb-cBMmhOvcuyodsLhR6LuRMv4YnRKDQ6siBLl1iZISiuNxEj6BhZMc1Q7jJjEQr4aFAafWP0Wm4GsCtXA0is4Chu-ZPJ8WON3d3_9umv3z_9-O7-JzjB2podMFIdoG7PyFumvefEaIdw_-79HUTwwMgd34sU7iQKx8gAGLkxSonEH6uByQx-NkqZg9SbCrka14iwjpHH2rMSCDxBuRf3PIYIXjvkKHr-qofgsf-2sUmlrfyfbZaMbI2VX41GrhiBf4CRvbAoE79c9brb_U4mqiQBohc46VV3VnZOYBVWdWCYZylHMTxI3PZ6yOMFOLRSb_oQraDw5xjKNfgtiKLoklkfrMDc6jbhbyv7dvbI4xI9PQvix1b2L4VS3t9rc9T6j6IOM_ADPGNu0dnv-7uXo0pjXld6mco9JIo7FzGypZMA1kocQaLYOZoIjcKCFYr7POBAHyZBkB0fYUvfTGB3pDxHUyt02VYmoOXaSQ9ERQG-NXwkLrO1ZmKT60QsIBhAmlvuDRcQDCdwOq0q7pYNGapaM6zCLB6aNUNG6hiqqA90LRE2PKNjRgYXs-eEdRjylPnT1JoD_J07lOunOvOav3I3MapmxSG32PL_eKr-Vg1QvBI82VYtxZ0vfKma_ukSUZOckq1kXkqwTPJcgCS3zliaGVkWJjvSMWRPNAQUR6RuByZHJbWg2mjRqoGP3vjWHHRdt_QZlQot2SidbSx_orMgqDm4YFOPdfw8ntor5LHUqThGRdDBjV6bJHdRUSm6ar_nvHizncmdKPn_j7ZK8L34vu2qfax4JdfwTeqnLjVNhXx_VL-_pH4g85hKncqEo_H6aFqHx86oHAVI7QTSAKzJdSpSqjYQb2isePJldM0IjLqhjOS6c_HSZVyfvZ4LX9Iv9VZYiYysCh_vcuRtW-6Wo7OqLloceS3WV5wNcrWqRibDZZwjGt3YG50omXyJivZkOkfIreRU8VioqPh8s-V6I1rTCA28Lv7_cDp9PnU7vcVqbBDNjo7Bys0W6bjq9y2dwYHOutOq28LtOpQklpUAk_FE4hO9DmBr9sIuzjUKG6QxCYMASuXSvXQyVqKzk3L7ZfGti1brcaUYeTYhltUzPHT7zaV8UkuUXEXFmisnWqrgWu44Cj9IrfHP4-L7T0AAC5gHcGq5KAn9le9ExIiTXwW9amLy316Kw3tzjBgJIIBwDuGb9vZaKhUx4mfKBW7rLuO4bYvYH6A2V_42sRfapGnbnw9HZt818K32MQz9izAbh9PZbTgbXofTGUyH8_l8fhuGEF57ZHo7H46vxmMIr4bTid-5Gk79ej4cT-bzD8Efb0r8Q4035uNy-_q2dcef3RDqrJPcWqHxxg_QtsGlj5ejSzWbt2tUdVX1MI7aL-PKP8Cp3K-YJoNyrJIF2lycHgcEuVQHqdMa-RceNpDoewoAAA)

- [Animated Tabs](https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAAE91XS2sjRxD-K0V7F2TQSCOv7TVjjZdkTwsbyME3j2FbMyWp457uobtGjwhBCOSULOQSyC2nJYfkx-UnhJ4ZzUOyLd8CQR4xqvq6uqq-rx_eMMVTZAH7SomUEyZwyyeW9dlUSLQsuNswWmcO4AysX8OzbGAXKMnZJtziY_ZYK0JFlgVsbGMjMgLJ1SyMGNmI3UQqIpFm2hBsINUktOpDbJATfuRrndM3la3K7VuDFlWMsIWp0SlErBzk2UXEriPl4sVaWQIu5Qc1M5gINz2EcOd8EW1AxFoFELF__vj8U8T6IPkEpTPc6pSTjhhs-4fYL393sB-RKI_xCfCfP3TA7-eI9insl9-6WG6Mpiewn3_pYL_miiv-BPavX7tYmeMEjRFon0rkx72keZqhse9q-H2nwXdUtKsPsmxFH-KizD7ERQn3EO6RcN0MJj4pODkWo5pRIoFFiTFhcssnEMIrS5yw5-Lc-fenncxkoRwIHxFSzyHHw1KJTn1qnIgFxJJbG0ZMek6vXCg0lTjHijduxReVOaJxOcsgl7XbJXMQoOjyCfJ4XhbNLQjCFHrue1B0-3S7AzZhpWhsEbVmiFjbwctlEW42MOHxw8zoXCXvtdQmgGYCCMOw3b_K-g4idoLohBlUr74je9ueQatYivgh3OzqzRJOOFgKmvd6pxDeQK_LjJv29LQTg_hEqARX4cZv2W_akM2nV5siYafHLVQ_ijy3nzrBNidierS2zoimq22uc5WgkUK58kv3h2TPPOymOBTTNlPDmqqG6KEjugLVgFyWUhoqvijfUi5UnYir-BHZjPe3vFQnGEZsyQV1tPWA62cbMC63SFd8uxyhBAkunXTWAYz8PuiMx4LWAfh7GmipzHlbyNEeEleCKpj3bEgyXFnh8nLwJDfcvQfgD872kO02tcXf5aatwXeddrhxUO5wv_8csQ6DTWdaFD7gumZwj4OKR0ffjdtHqoFqbGktS--gtYfApoyzFAnNAzi_8rPVdWmao5jNKYBLfzGvTClfeTvzm8sGOtEmQeMZnojcOqYaT73kA1jOBWFl1ws0U6mXAcxFkqCqA608O-eJXga7an0YZavimVvZ8xOcgf_a_Q3BH_hvL077DfIsWxXPceR5tiqe48irbFU8x5GjS5fo5f8h04qORNhM8nUAU4k7Rt2rlwiDcbkcYi3ztORvWx5xA3cgbQ75P5km7lPFyXiSCDUL4CJbFY9_XEylZ6KJdOpJnFKN8h-FGCfV5zFBIS2rpUjAHS-IuKf_8_Mqgaq8YCb1hMtdhYPumbozRySFJa9YdQEorXZhW5X7tSnlZiZU2zLVirxllcKFv-ew4nsMYHRet-Zxrup1PfL915WtqqJM_D_Ldo_ki0PXcyy_jOfHqm_V44QFo_bMmS73-wAMSk5i0XThqX0sojg31t1lMi0UoantO_mcHSfpu9ySmK696j-RAGzGY_QmSEust8aIuBQz5bl7hQ0gxs5sLl4Ao4Yiobyq-qYduUXjlQfPHslxeR878aej0ejiQCn1jaPRS9MrPrFa5q2O7BaWd9aq3PHYzsWU3fEP-9WWQnv3uHqDl9O3B7l17yZNgi9s9V4fX97jbgbNvG3Fn13VxWyrHWQ83B3ErM8IV8QCMjlu7_uMuJBLoRIWTLm0uP0XrcxYpvYOAAA)

- [Drag Direction Locking](https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAAE5VUTW_bMAz9K4S6QwokadKih6lxu2EtsMNu223aQbZoh6ssGRKTJvDy3wfZTto0LbAhgCM98ePpkVQrnK5RSPEVrfXw5IM1MEJDjOZcjEVJFqOQP1vB2ybZJUCM916fm2Ya12g5YbmO-BZeeMfoOAopFrEI1DBY7apMCY5K3CqnmOrGB4YWas_kHeygDL4GJfr9JK6VuFEumVpk0AXTGu8pYNGZZ_AhsmZcKLFRAv6AEtvu362svR2l7_mNcouLPn1K6RaG1kAmUwI3um4sKgGF1TFmSuTVJLe6eBzYtZ8COoMBvpHDUZdj_JrD-e4ty-27lov-ZlND67RVbIKunlcH62--eOxh747ArB3hOWS3MDpVA_scnU_Q1YMzWTt6z7hTZ_ec-ot3kYMmxzFrW2DfSJiNIVC15G6Ve2Zfd0uLZcJg98L_R9AuUgqe3HO_cgV-ZypLhzFKuJ51IRJ6r-uGXCVhfn0U4cHqyFRk7Wx6OcBPS7KY7pJiFqsQfZCgRBV0npOrlDgEONTQb5RI0MVtqryhdVf29iw6ahrkvkRmL0SK9qJ3Tqr26nzorXdqSY6YtM3aUtuIAzHtqNaM6QK-0QXxVp42cpbBgRLcwRwkzKZXh8vxkbZmFXTPbTadH2wib22XJfg0E_JFwBS-p38HH2fwsnJ72Sw5fNatvRjU2nUj04XuRkJW1ufaQtt7nw0ztN8rfiLDSwlXs1mzudmDS-yb6Bg1FBurtxJKi8-otlS5CTHWUUKBjjEczn6vIlO5nQwvy8l543uRJAS0Okk8HO36N0TxNPebE7LXl29wPQJzHwwGCfNmA9FbMnBWXqffG6l1Hr1dMR6O9m2bmvaET9L9H9WbnxCadEOaSBkdl_gfrLrq77qncaitGAvGDQvJYYW7X2PBmuwTOSNk381_AfFSjH8zBgAA)

- [Drag to transform](https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAAE71W32vjOBD-VwYthQTkRrbrtuvGhe1xcAdduIdjX6I-qLbs6KpIRlLShJD_fZEdx06a_XVcj-TB_kbzzXwz47G3SLEFRyn6g0up4VUbWcCIF8LxYowwKoXkFqWzLXKb2p_zAMKd16e6vrQrLp3Hnpnl5_BcK8eVsyhFU5sbUTuQTFUZRc5SdE8VdWJRa-NgC0vLP2sntPrC5JJjf_-3YcqW2iwwLBoT7KA0egEUtfeBXVF052lyrayDNWQnPCMyHtr_VPXSQQazICQEA8EQEvI0OPHM8pfK6KUqWqpDCqM13rtjmPnz1FEkheLMBJVhheDKjcJbUvAKw4eyJOQ2B3KBwVTPoygMMXzEEEXJ2Ee8GFOEf0hyc0NIWR5Irm-bhKPkFzia4HHrhYGMD2Qxhoh8bKAh19OwWrmW2ny3DOhUHEUYWnSQbQ_2USk6CuVE_vIXc_Mz0WbhvksYZv7qOEWjrfWOn855Bt41SJLvuz6cdU2862nY6aSdYj-5alqIVTPC03YYLwuxglwyazPaTD4TihuKwLqN5Nl2Oxyu3e6-7d3Aed9M13EsLQ9cl1XwrNcUdUcOlGvY7TqwMMw_WoNjHvnNqzVMKGe9g-SlS31njKjm_uqE4HfJrBN5tiWXyd5w39mndlUdFNZGV4ZbG4hcK4pgJfjrg15nFBEgkPj__hHfO--F1szNe5S6UkiZUaS04n3irUajX3jwKgo3zyiKzlmzbTOku6GlyCj63MweAQZRe0EgxASuCH6DBR485e6qm0KCYZNCMqgSdZOfkCV8Gn6sj6nfR214haNreIQownEMjxAnOLw-y18wO2fGsE3Tp_Abur2YR64qN0_7R_NXK_BOUm9weAOPcYzj-D9SOFgi_6rLjf__0eY4brSHN--g_eEb2qcTu6q6XTXpl1W7-Y6B6WRvUNMmWHMmraR-ZhK2Lcflm63WWahrqpJCeEXq9V0Hznm7qI7RfpUGTbFS-FAm_tef0KbgJvBvxKVNIRp616wohKqOUK--zfCwu_vMCmFryTYplJL3NP8srRPlJth_5qSQc-W4OdiZFJUKhOML-8bmiVII7060J-Sc9vgIXbB10JWKkIufUNxrO9rabys_pDsUvgebCdk178F9fxFGjq8dSp1Z8t0TRo4J-SpUgdKSSct3XwFLFAABZwoAAA)

- [Svg Path Morphing](https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAAE5VWW4vjNhT-Kwd3H5KtdeIjy5dkJwNloVCYpYVt87IeFseRY1PZDpaSvQz570WWnfUMW7aNIZKOvvPp3HR58tq8kd7Ge385wh-5qeBd15-quj16vlfWSmpv8-HJM19OFmQFnj-p_HI6ob5IZaxsn2v5PXnRtUa2Rnsb704XfX0yoPL2uM08ozPvPmszUzenrjdQqvN-L3so-66BzBuHmfdmhnmCpjN11_pju8vVWfpw1vLPPm912fWND3lbN7mRPrz7hoHrxOsUmb445jYzq9evbQOvYfvsBwDvq_wk4ZCbHODF7HbrlFYjyWoInwaT_y1bt1hlzElvVqtjbarzHouuWdmwNHm7Gr1b7VW3XzW5NrJfHWTT6dU-13XB9OWIlWmUpS66VhvQJu9hC5n3jjhQgjx5oBQpBU6KEcaCJRiED5zDGrlQLEFaM4zpgThYGa0hxTiEcT5CEYPAJHyIMOXA6esYabdaJfPewOBiZtyanDCM7FIiYoQhfxuhAIowjIEDceQpcEgxAg4RCg7C_oWQYARhQZgICCBEQZgSCAvDYP2WQgzWEFoZCUxiCIFiqwG0xiiFEPhIxwfywnIkKQtRQIxpzFKMIiDCSDxMNr7wJG8PM0d4CBFGOx4UAXDkjDAFwQSIiiUYFowwSCFgHImhCBnH1HpL64fBwDTUhDxmhDwEwtB2ogI5Z0hrFGuGfI2JaziHAFBwDGKMkWIMBAbW9ZCAu-iPvZ0oAoZpiHHCCCMgtGtG74kgREqACMQlqWhHNgDfRUaAcQI0SHZEFe34v2A1YTRgcQaO_hv4eWRPKm_lPLQEFF8YVyxl0S6cKNnIyW7G2shbUpvLaLdWLIXowlXKuLVnrRgfLONchVbFooAuVveBbGFcWISRSoG_tEjVx8q0dXt0GyUBfiGqwstaJYx4xYQSLH2u0nZG3rZVeKEAo6hgGK0ZhsKmN2EYRYy7f-QEARNANskChLYdEO5jbsDELqnELqxY_PV2xowRG06ILXy4GeoP9em7WPpu2_mDUf6w4_1vPj3OrC461fUDU-b9VJZlSDzzfBgGQZCm4-BwCAIpx8F6TVSW4yA4xGE5wYLiUJTJOBBlGeyTzHv88en4l6mV_tHB6Aw-SvNbe5CfYQuLjxvQph-cr61sA-252ct-Cdt7J5l5WrdG9qdO5UOaxmMTZ1K3SnluC3uu26vgVwdanPru2EutN_OL4M6tde-7ZEymfHhcwpOr5F6ac98-u1NuVKMWNvlpMbm0HIX-RJCZpv4s-w0sch_2o1c3exc55NpdLD7sZ_0naPLP7-Wxka15kO3RVBsIkOC69B3vdTnE5eo8VtLV0xTWV9pY9sCBVitwVzCrj23XSxhmP_aylL1sC3n4qLoiV-rLrDhHH2E7v1wXtzWWs6yUtVKw_V8xciU7J7EwR_IyYyPFcizBV7IsZWEWiyGWY5TH7Ss_TQG4GfpmDnCPAVsZ2-lhMFtmUp_l7nDuB7wNfupPUplruYHMs-1v7e9nk3m3uYNU-RcLj26irn3bNScljdzAM6vtV5ewmGVuux0DpoakAwNazuGZmexFLc2U4NvcrARoNnMFqbR8wXPD_vwCPHWvz0vtthmcD7dYojbdaTGWo23uVu5tZ99z7Z2-HOFTfTDVNvNEEGQeVNKeYtNwePXdHcFMtWNfg7Y_7A8KgIIl6CJXcmFvv2Q5qmTmzlUmDqXzZKvwCoftkx1eYeV4V8f7waCLbT3fM_Kz8TamP8vro--ZvFaf6vbgbcpcaXn9B6ZPGQkBCwAA)

- [Animated List](https://svelte.dev/playground/hello-world?version=5.38.6#H4sIAAAAAAAAE71Ze2_bOBL_KlO1WMi3smylaZo6Vu7a3u5dgd3bRYO9BS4KUFoc2UxkSiCpxF5B3_1AUk8_Gm8POOSP2OQMOfObJ8elw8kanZnznrM1UUjhJyaV4zkJS1E6s9vSUdtcE-gFx2vJ89yXj5gqvbYgEg-txxlXyJV0Zs5cxoLlClLCl2HkKBk51xGPFFvnmVDQ3K4vh0Rka4gcf0Lq1XHKpKqPjZyrHl8JsZRQdSyFYqn07-Uu2TpTLOMexAKJwp_INivUz_VaffmvAiXyGLvjLNNYPtrTeKTijEuthGaH8MBp7uiqoytyShRCWDP49vtVxOcTC4eGgM8HyiumUgwj5weuUMAPG6aMRSIHSsteGdzKl5KzPEcF8YqlVCB3S0hYqlAg9UCqbYrSg9oCUI0qzRWpeZHazbCMpXQtna_xHdmDDdEuIowzxUgalglJJVawzqiWMc9yq3vkQMa1rB-zdZ6iwrB0RxBe6_tllqKfZks3clBrE9ckkdO7USuEJF61KgCRwBSuPWCc4gZc_cVntNGjFrQGNmX91UjVGtbaadZqSNAqVEKWk5ip7QymHmxnML70QMYkxRlM_XeXUO1w1j4ZluVwPVLtQYG3u2VO312sb9mnVoJwybQ3zaAEHX4ziByZC8aXkaONy5KEo5QzeDOdekDJOmd8OYPXU6h2TtsVX5vggNZDpT0YikALQeznqR9cQrUHCiWKjK3nlsZQCjfqEE2KfKlWYdmY2bcLO6TWqn_HHDlFHm-_Tn89ZC7_JjSbaHzfeM6O20xav-l74ER7YEs4n-xEQU06nxTptc0G-5HSHle-ZAnsSA1hGMK0J8ncJhifskcYuiyuc7Wt4KCbQlVB54XdRqA39u0LVTVA6Ad9tA_vKQXCTYxBJiBOkQhQK6yF9ntSTjoxO_0mLGlSykGgykmdoCqd7vop7jrijudoD3FmShRYeUdqzKH0P6w2RyhOrzv6Xiihn8H_RdYoc3KwDuxUn5r7ps7ELf03VCpNqDN-oi9u0PpVZLmEOtGY8JqBVDoNXNk1WxFmh-W_jRy7Hzl3NX1TK2aNzPPGnredvXN96wwG-a3xZJ0NGJ0BL9YLFFegrdjIBNVtc08vC8sZfMY4E3RuqTwgfHs9oKvN1Ql1q73y61fd9Y_okt6d_WA3K4trihp9A5_XVkuvKc7VbAfuEF4ZBGwl55GaTOATTxlHG6OQLe4xVrIr81ZPCBvISJ734Esyrn4ka5ZudRYv2FgSLscSBUs8kFupcD0umAdjkucpju2KBze4zBB---TB52yRqcyD3xYFV4UHHwlXRGCaRk6rd04oNSXg7LxdW5PN74yq1QzeXEx7q2LJuBblfJpvgBQq652zIPHDUmQFp5riZfIuIcmiv58JiuIzoayQMwjOehubmxWh2ZPmm0KQb-B1vgGxXBB36pk_f3o56h0VZ2kmzC3Bmf6LHLvTGHOFRKv0WR_ZgkmZzFNikExS3PSOIylb8k8K11JvxqiDqbd9X-iquf3YuJqupyTG8QLVEyLvUVqAPmRKZeueijtiae_Ulr1hf-AMzqYeNMB2NVgY0WFfZliS3NTc3btaVsbzQvWdKMVNv1Vo7R1Md2yjr9HoyyxlFF7iG3yLxy142a5nhdI-rtl5xvGoTzytmMI_YcZFoZTpIo4z7GsVOYF2zuAs3-yJ_q0KPqNGIaQVK8_Yju8UEsUNphirPXQaLXX90bbW_290OuhRQqtW30u8vl8sBaOdX3ReYNPgaRr8b-h0DtXF9P8h2IzCezGWYqKORM6Rm3eRWxFOtRFa7J5sJrwcqnCDaWLEUwJVvDrq9AJzJIrx5VjHCBHjpSCU6eYyuJxSXHo10F6DuE5-HrxMXifnycXwy0W-GR01SJe9uwbOf7cDT90J9BNQcH4oAck1SdMdwjP9KNyNwJaDEr7UTlT2iDA5Pz8_7xEtV5lUH5R5GnRe13j7EDnzkMiJQK705qEw6-Ljor3C9L8983XuedEipBuC99qKB31wGA6UyBX-mXjo1L9YvD27nH6lRibJTjqousbhxnSC8Aak0s3GIyMgCo6y6Ut0hJuWw-y7dRdmG5_Aq3ueyPlQbGHN0oeeESzNWUfzGQkFmsVyj-h1R3SzYjkwtUdy_jzJm-dJLp4nefs8yeXzJO-eJwmmJ9AEJ9CcnUBzAsLBCRAHJ2AcnABycALKwQkwByfgfHYCzmdfwfnODsx0MHDcqE-0i4bzbosKkqhuJ3Iip9u0j5MDu22H3k6VQnhFUbBHpGYsIH2747obM67amMGFr7KfsicUH4lEd-QzHqcFRenWL-PB7mg0vIlQfYl9W_hPTK1cOwirM5kl0poYjXwl2LoeGUaKJeC-UCMQqArBm0UjZsHliiXKrZ9EBqgGUz3dq4lrBL8PIahXGuA0JvZRNJRX4Dp7xA_bT3tid2-vfQUYhNDgx-knPaHrIGTUDDoY7evF4BrGwajmknnKYnSZB8HokFRyVSRJil9DMskEuCaFtrLUU5YxBFeg75teARuPR_3WUx9-DyH8TNTKT9IsE675KAin2dodwV-0qN9DMBq170vzGpW37M6z99ze391BCLfNl2aZ3TXP3-qASnbAckghdyB9CFNz93BE3JsQ9ca2JM_rGeoRgu4N1c5a56vgOOGoui5Nd1HNJ6ug4ZA54Qd4THehOfryVxaM-UQzWdEm9dzouJiiL595-jTY79Oa7W6ct2Cczh5JWmBYGl9vd_KUxLjKUooijBw97tKSNc-TSGX8Abc0e-Jh6WLfsxqXRf8Bt8aV62l85Ix0fLudazRz0EkjvH3tHFDRbowqyHicsvghLAml1fV7SucTu_ftYB0gqlGCPjw2fVUwBOZHsxo58C061HFaXd_YDwNd_txRJj6q64_631FIutnuyT96dOy9n0x6k-Gvj5msox2xhH6mdKY4EoHmITKqrls5atrux5b8AJsJwia27DR9Psk7nmdCUitU1r-YVL1Y7KHZ_7RvphJ8368Pbdp9r7dm3wkan86CNpt1BaX7yeYaPptV6Bm2Px8-bRzcDEyHI-Deam_sixszdE0KHuuZKLQY_bK4rwuCrbLwi5nm-ciVYNgjsnC1_cGtByaM7oyS5iO8CEMoOMWEcaQNw5rkrnv7gNsBw04JKri2r5TNxPE2cur3nn4PRc4fpqTaz_rt9juy5UrZ7_oF-s_ed_OAqUlT3PxDZE_dt5uVYPyhGwC3DVEm1kQppP82moRmlJ0ltWI259mIiBz47jt4MZC4a4kecDuCv8KXV6XhrPLNF5jZU9oba6C_vCofcOsLNPnHndy-H__nbrL0wF0biL6MX5XrYXNVfRlVs1flUNjqS1NlG8jvM8Zd3d6Yrq8aetOd5yjC0ifGqTOzP1_-F3M_Cm30HgAA)

## 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`:

```ts
import { createLayoutMotion } from "motion-sv";

const layout = 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:

```svelte
<script lang="ts">
	import { motion, createLayoutMotion } from "motion-sv";

	let isOn = $state(false);
	const layout = createLayoutMotion();

	const toggle = layout.update.with(() => (isOn = !isOn));
	// or:
	// function toggle() {
	//   isOn = !isOn;
	//   layout.update();
	// }
</script>

<motion.button style={{ ...container, justifyContent: "flex-" + (isOn ? "start" : "end") }} onclick={toggle}>
	<layout.div
		style={handle}
		layoutDependency={isOn}
		transition={{ type: "spring", visualDuration: 0.2, bounce: 0.2 }}
	/>
</motion.button>
```

> 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:

```svelte
<motion.button style={{ ...container, justifyContent: "flex-" + (isOn ? "start" : "end") }} onclick={toggle}>
	{#if isOn}
		<layout.div
			style={handle}
			layoutId="handle"
			transition={{
				type: "spring",
				visualDuration: 0.2,
				bounce: 0.2,
			}}
		/>
	{:else}
		<layout.div
			style={handle}
			layoutId="handle"
			transition={{
				type: "spring",
				visualDuration: 0.2,
				bounce: 0.2,
			}}
		/>
	{/if}
</motion.button>
```

---

### Animate Presence (Enter/Exit)

- **React**: implemented with child diffing.
- **Vue**: uses `Transition` / `TransitionGroup`.
- **Svelte**: has no equivalent ([issue #8547](https://github.com/sveltejs/svelte/issues/8547)).

Limitations in this port:

- Certiain Variants with `AnimatePresence` (e.g. `when`) may not work.
