├── .gitignore
├── .npmrc
├── .prettierignore
├── .prettierrc
├── README.md
├── eslint.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── src
├── app.css
├── app.d.ts
├── app.html
├── lib
│ ├── index.ts
│ └── motion.svelte
└── routes
│ ├── +layout.svelte
│ ├── +page.svelte
│ └── CodeBlock.svelte
├── static
└── favicon.png
├── svelte.config.js
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | # Output
4 | .output
5 | .vercel
6 | /.svelte-kit
7 | /build
8 | /dist
9 |
10 | # OS
11 | .DS_Store
12 | Thumbs.db
13 |
14 | # Env
15 | .env
16 | .env.*
17 | !.env.example
18 | !.env.test
19 |
20 | # Vite
21 | vite.config.js.timestamp-*
22 | vite.config.ts.timestamp-*
23 |
--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 |
--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
1 | # Package Managers
2 | package-lock.json
3 | pnpm-lock.yaml
4 | yarn.lock
5 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "useTabs": true,
3 | "singleQuote": true,
4 | "trailingComma": "none",
5 | "printWidth": 100,
6 | "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
7 | "overrides": [
8 | {
9 | "files": "*.svelte",
10 | "options": {
11 | "parser": "svelte"
12 | }
13 | }
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Motion for Svelte 5
2 |
3 | This project is an experimental attempt to wrap Framer Motion (now known as [motion.dev](https://motion.dev)) with Svelte. The current implementation supports Server-Side Rendering (SSR) and utilizes runes for enhanced functionality.
4 |
5 | ## Installation
6 |
7 | To install the package, run the following command:
8 |
9 | ```bash
10 | npm i motion-svelte
11 | ```
12 |
13 | ## Usage Examples
14 |
15 | ### Basic Animation with Enter/Exit
16 |
17 | ```svelte
18 |