Feature/rewrite

.changeset/polite-rockets-deliver.md

@@ -0,0 +1,5 @@
+---
+"motion-start": minor
+---
+
+rewrite to include new and latest features of framer-motion

package.json

@@ -19,11 +19,12 @@
 	"types": "./dist/index.d.ts",
 	"exports": "./dist/index.js",
 	"scripts": {
+		"sv": "bunx sv",
 		"dev": "vite dev",
 		"build": "vite build && bun --bun package",
 		"package": "svelte-kit sync && svelte-package --input ./src/lib/motion-start && publint --strict",
 		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check": "svelte-kit sync && sv check --tsconfig ./tsconfig.json",
 		"lint": "biome check",
 		"test": "vitest",
 		"test:types": "vitest --typecheck.only",
@@ -32,46 +33,47 @@
 		"release": "bun --bun run build && bun --bun changeset publish"
 	},
 	"dependencies": {
-		"bits-ui": "^0.21.16",
-		"class-variance-authority": "^0.7.0",
+		"bits-ui": "^0.22.0",
+		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"framesync": "^6.1.2",
-		"lucide-svelte": "^0.453.0",
-		"mode-watcher": "^0.4.1",
-		"popmotion": "^11.0.5",
-		"style-value-types": "5.1.2",
-		"tailwind-merge": "^2.5.4",
-		"tailwind-variants": "^0.2.1"
+		"lucide-svelte": "^0.471.0",
+		"mode-watcher": "^0.5.0",
+		"nanoid": "^5.0.9",
+		"tailwind-merge": "^2.6.0",
+		"tailwind-variants": "^0.3.0"
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.27.9",
 		"@biomejs/biome": "^1.9.4",
+		"@changesets/cli": "^2.27.11",
 		"@emotion/is-prop-valid": "^1.3.1",
-		"@sveltejs/package": "^2.3.5",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.8",
-		"svelte-check": "^4.0.5",
+		"@sveltejs/adapter-auto": "^3.3.1",
+		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
+		"@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
+		"@tailwindcss/typography": "^0.5.16",
+		"@tailwindcss/vite": "^4.0.0-beta.9",
 		"@tsconfig/svelte": "^5.0.4",
-		"@types/node": "^20.16.12",
-		"@vitest/ui": "latest",
+		"@types/node": "^20.17.12",
+		"@vitest/ui": "^2.1.8",
 		"csstype": "^3.1.3",
-		"publint": "^0.2.11",
-		"typescript": "^5.6.3",
-		"vite": "latest",
-		"vitest": "latest",
-		"@sveltejs/adapter-auto": "^3.2.5",
-		"@sveltejs/kit": "^2.7.1",
-		"@tailwindcss/typography": "^0.5.15",
-		"@tailwindcss/vite": "^4.0.0-alpha.28",
-		"tailwindcss": "^4.0.0-alpha.28"
+		"publint": "^0.3.2",
+		"runed": "^0.23.0",
+		"sv": "^0.6.11",
+		"svelte-check": "^4.1.4",
+		"tailwindcss": "^4.0.0-beta.9",
+		"typescript": "^5.7.3",
+		"vite": "^6.0.7",
+		"vitest": "^2.1.8"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0-next.269"
+		"svelte": "^5.17.3"
 	},
 	"engines": {
 		"bun": ">=1.0.0",
 		"node": ">=20"
 	},
 	"sideEffects": false,
 	"keywords": ["svelte animation", "svelte", "animation", "gestures", "drag", "spring", "popmotion", "framer-motion"],
-	"trustedDependencies": ["@biomejs/biome", "@sveltejs/kit", "esbuild"]
+	"trustedDependencies": ["@biomejs/biome", "@sveltejs/kit", "esbuild", "svelte-preprocess"]
 }

src/hooks.server.ts

@@ -0,0 +1,8 @@
+export const handle = async ({ event, resolve }) => {
+	const response = await resolve(event, {
+		preload: ({ type }) => {
+			return type === 'font' || type === 'asset' || type === 'js' || type === 'css';
+		},
+	});
+	return response;
+};

src/lib/components/Box.svelte

@@ -5,7 +5,13 @@
 
 <div
     style="min-height: {minHeight}px; height:fit-content; touch-action: none;"
-    class="{cls} dark:bg-white/5 flex justify-center items-center border border-primary/40 rounded-xl my-2 p-4 md:p-6 w-full"
+    class="{cls} dark:bg-white/5 dark:text-black flex justify-center items-center border border-primary/40 rounded-xl my-2 p-4 md:p-6 w-full"
 >
-    <slot></slot>
+    <svelte:boundary onerror={console.log}>
+        <slot></slot>
+        {#snippet failed()}
+            <p>whoops!</p>
+            <p>check console for error</p>
+        {/snippet}
+    </svelte:boundary>
 </div>

src/lib/components/Card.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Motion, useMotionValue, useTransform } from "$lib/motion-start";
+    import { motion, useMotionValue, useTransform } from "$lib/motion-start";
     let exitX = 0;
     const x = useMotionValue(0);
     const scale = useTransform(x, [-150, 0, 150], [0.5, 1, 0.5]);
@@ -19,7 +19,7 @@
     };
     $: isFront = frontCard ? variantsFrontCard : variantsBackCard;
 
-    function handleDragEnd(_: any, info: { offset: { x: number } }) {
+    function handleDragEnd(_: PointerEvent, info: PanInfo) {
         // console.log("info", info);
         if (info.offset.x < -100) {
             // setExitX(-250);
@@ -39,7 +39,7 @@
 
 <!-- Animate Presence Stack -->
 
-<Motion.div
+<motion.div
     style={{
         x,
         rotate,
@@ -58,4 +58,4 @@
     class="w-32 h-32 top-10 bg-white rouned-xl absolute rounded-xl text-black flex justify-center items-center select-none"
 >
     {index}
-</Motion.div>
+</motion.div>

src/lib/components/motion/AnimateLayout.svelte

@@ -1,4 +1,5 @@
 <script>
+    import Box from "../Box.svelte";
     import { motion } from "$lib/motion-start";
 
     const spring = {
@@ -14,13 +15,23 @@
     }
 </script>
 
-<div
-    class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
->
-    <button class="switch" data-active={active} onclick={toggleSwitch}>
-        <motion.div layout class="handle" transition={spring} />
-    </button>
-</div>
+<Box>
+    <div
+        class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
+    >
+        <button class="switch" data-active={active} onclick={toggleSwitch}>
+            <motion.div
+                active={1 * !active}
+                layout
+                transition={spring}
+                onLayoutUpdate={(...args) => {
+                    console.log("change", args);
+                }}
+                class="handle"
+            />
+        </button>
+    </div>
+</Box>
 
 <style>
     .switch {

src/lib/components/motion/AnimatePresenceMode.svelte

@@ -0,0 +1,60 @@
+<!-- https://codesandbox.io/p/sandbox/t7qxhv?file=/src/styles.css -->
+<svelte:options runes />
+
+<script lang="ts">
+    import Box from "../Box.svelte";
+    import { motion, AnimatePresence } from "$lib/motion-start";
+
+    let count = $state(0);
+    let items = $state([0]);
+    let popLayout = $state(false);
+    let mode = $derived<"popLayout" | "sync">(popLayout ? "popLayout" : "sync");
+</script>
+
+<Box>
+    <div class="flex flex-col items-center">
+        <div class="flex flex-col p-0 pb-[50px] items-center">
+            <label class="flex flex-col items-center my-[20px] mx-0">
+                <code>popLayout</code>
+                <input
+                    class="text-accent-500"
+                    type="checkbox"
+                    checked={popLayout}
+                    onchange={(e) => (popLayout = e.currentTarget.checked)}
+                />
+            </label>
+            <motion.button
+                class="bg-accent-500 text-background border-none py-[15px] px-[25px] rounded-[50px] text-[18px] font-bold cursor-pointer w-[150px]"
+                whileTap={{ scale: 0.95 }}
+                onclick={() => {
+                    count++;
+                    items = [...items, count];
+                }}
+            >
+                Add item
+            </motion.button>
+        </div>
+        <ul
+            class="flex w-[300px] h-[300px] flex-col gap-[20px] m-0 p-0 list-none"
+        >
+            <AnimatePresence
+                {mode}
+                list={items.map((id, indx) => ({ key: id, id, indx }))}
+                let:item
+            >
+                <motion.li
+                    class="block bg-accent-500 h-[80px] w-full shrink-0 grow-0 basis-[80px] rounded-[20px] m-0 p-0"
+                    layout
+                    animate={{ scale: 1, opacity: 1 }}
+                    exit={{ scale: 0.8, opacity: 0 }}
+                    transition={{ type: "spring" }}
+                    onclick={() => {
+                        const newItems = [...items];
+                        if (item.indx > -1) newItems.splice(item.indx, 1);
+                        items = newItems;
+                    }}
+                />
+            </AnimatePresence>
+        </ul>
+    </div>
+</Box>

src/lib/components/motion/AnimatePresenceStack.svelte

@@ -1,15 +1,19 @@
+<!-- https://codesandbox.io/p/sandbox/gm9n3c?file=/src/index.js -->
 <script>
-    import { Motion, AnimatePresence } from "$lib/motion-start";
+    import Box from "../Box.svelte";
+    import { AnimatePresence } from "$lib/motion-start";
     import Card from "$lib/components/Card.svelte";
     let index = 0;
     $: mint = index + 1;
 </script>
 
-<div
-    class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
->
-    <AnimatePresence initial={false} let:item list={[{ key: index }]}>
-        <Card bind:index={mint} frontCard={false} />
-        <Card bind:index drag="x" frontCard={true} />
-    </AnimatePresence>
-</div>
+<Box>
+    <div
+        class="w-64 h-64 relative bg-gray-700/40 rounded-lg flex justify-center items-center"
+    >
+        <AnimatePresence initial={false} list={[{ key: index }]}>
+            <Card bind:index={mint} frontCard={false} />
+            <Card bind:index drag="x" frontCard={true} />
+        </AnimatePresence>
+    </div>
+</Box>

src/lib/components/motion/AnimationSequence.svelte

@@ -1,6 +1,6 @@
 <script>
     import Box from "../Box.svelte";
-    import { Motion, useAnimation } from "$lib/motion-start";
+    import { motion, useAnimation } from "$lib/motion-start";
     let controls = useAnimation();
     let startCode = async () => {
         let all = [
@@ -21,7 +21,7 @@
     };
 </script>
 
-<Box cls="bg-slate-800 text-black">
-    <Motion.div animate={controls} onTap={startCode} class="box">Tap</Motion.div
+<Box>
+    <motion.div animate={controls} onTap={startCode} class="box">Tap</motion.div
     >
 </Box>

src/lib/components/motion/ColorInterpolation.svelte

@@ -1,5 +1,6 @@
 <script>
-    import { Motion, useMotionValue, useTransform } from "$lib/motion-start";
+    import Box from "../Box.svelte";
+    import { motion, useMotionValue, useTransform } from "$lib/motion-start";
     let x = useMotionValue(0);
     let background = useTransform(
         x,
@@ -9,21 +10,23 @@
 </script>
 
 <!-- Color Interpolation -->
-<Motion.div
-    style={{
-        background,
-    }}
-    class=" h-[350px] border border-dashed flex justify-center items-center rounded-3xl"
->
-    <Motion.div
+<Box cls="grid cols-1 rows-1 justify-stretch">
+    <motion.div
         style={{
-            x: x,
+            background,
         }}
-        drag="x"
-        dragConstraints={{ right: 0, left: 0 }}
-        whileTap={{ cursor: "grabbing" }}
-        class="w-32 h-32 text-black rounded-full bg-white cursor-grab flex justify-center items-center select-none"
+        class="h-full w-full border border-dashed flex justify-center items-center rounded-3xl"
     >
-        Drag me
-    </Motion.div>
-</Motion.div>
+        <motion.div
+            style={{
+                x: x,
+            }}
+            drag="x"
+            dragConstraints={{ right: 0, left: 0 }}
+            whileTap={{ cursor: "grabbing" }}
+            class="w-32 h-32 text-black rounded-full bg-white cursor-grab flex justify-center items-center select-none"
+        >
+            Drag me
+        </motion.div>
+    </motion.div>
+</Box>

src/lib/components/motion/CyclingThroughStates.svelte

@@ -2,7 +2,7 @@
     import Box from "../Box.svelte";
 
     // Cycling through states
-    import { Motion, useCycle } from "$lib/motion-start";
+    import { motion, useCycle, useMotionValue } from "$lib/motion-start";
     let stateText = "State 1";
     // In React
     // const [animate, cycle] = useCycle(
@@ -16,14 +16,17 @@
     //   }
     // );
     // In Svelte
-    let rotate = useCycle(0, 90);
-    let scale = useCycle(0.8, 1.2);
+    let [rotate, cycleRotate] = useCycle(0, 90);
+    let [scale, cycleScale] = useCycle(0.8, 1.2);
     let x = useCycle(0, 140);
-    let backgroundColor = useCycle("#9EF4FF", "#0FBFFF");
+    let [backgroundColor, cycleBackgroundColor] = useCycle(
+        "#9EF4FF",
+        "#0FBFFF",
+    );
 </script>
 
-<Box cls="bg-slate-800 text-black">
-    <Motion.div
+<Box>
+    <motion.div
         animate={{
             scale: $scale,
             backgroundColor: $backgroundColor,
@@ -32,8 +35,8 @@
             duration: 0.3,
         }}
         onTap={() => {
-            scale.next();
-            backgroundColor.next();
+            cycleScale();
+            cycleBackgroundColor();
             if (stateText === "State 1") {
                 stateText = "State 2";
             } else {
@@ -43,5 +46,5 @@
         class="box"
     >
         {stateText}
-    </Motion.div>
+    </motion.div>
 </Box>