├── .changeset ├── README.md └── config.json ├── .devcontainer └── devcontainer.json ├── .github └── workflows │ ├── main.yaml │ └── publish.yaml ├── .gitignore ├── .vscode ├── launch.json └── settings.json ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── biome.jsonc ├── bun.lock ├── components.json ├── package.json ├── src ├── app.css ├── app.d.ts ├── app.html ├── lib │ ├── components │ │ ├── Box.svelte │ │ ├── Card.svelte │ │ ├── ComponentView.svelte │ │ ├── motion │ │ │ ├── AnimateLayout.svelte │ │ │ ├── AnimatePresenceStack.svelte │ │ │ ├── AnimationSequence.svelte │ │ │ ├── ColorInterpolation.svelte │ │ │ ├── CyclingThroughStates.svelte │ │ │ ├── Dock │ │ │ │ ├── Dock.svelte │ │ │ │ ├── DockIcon.svelte │ │ │ │ └── index.ts │ │ │ ├── Drag3DTransform.svelte │ │ │ ├── DragConstraints.svelte │ │ │ ├── DragDirectionLocking.svelte │ │ │ ├── DragTransform.svelte │ │ │ ├── DurBasedSpring.svelte │ │ │ ├── KeyFramesPosition.svelte │ │ │ ├── MorphSVG.svelte │ │ │ ├── Navbar.svelte │ │ │ ├── Repeat.svelte │ │ │ ├── ReverseEffect.svelte │ │ │ ├── ScrollProgress.svelte │ │ │ ├── Spring.svelte │ │ │ ├── Tweened.svelte │ │ │ ├── WhileDragEffect.svelte │ │ │ ├── WhileHoverEffect.svelte │ │ │ ├── WhileTapEffect.svelte │ │ │ └── index.ts │ │ └── ui │ │ │ ├── button │ │ │ ├── button.svelte │ │ │ └── index.ts │ │ │ ├── card │ │ │ ├── card-content.svelte │ │ │ ├── card-description.svelte │ │ │ ├── card-footer.svelte │ │ │ ├── card-header.svelte │ │ │ ├── card-title.svelte │ │ │ ├── card.svelte │ │ │ └── index.ts │ │ │ ├── dialog │ │ │ ├── dialog-content.svelte │ │ │ ├── dialog-description.svelte │ │ │ ├── dialog-footer.svelte │ │ │ ├── dialog-header.svelte │ │ │ ├── dialog-overlay.svelte │ │ │ ├── dialog-portal.svelte │ │ │ ├── dialog-title.svelte │ │ │ └── index.ts │ │ │ └── tooltip │ │ │ ├── index.ts │ │ │ └── tooltip-content.svelte │ ├── motion-start │ │ ├── animation │ │ │ ├── UseAnimatedState.svelte │ │ │ ├── UseAnimation.svelte │ │ │ ├── animate.ts │ │ │ ├── animation-controls.ts │ │ │ ├── types.ts │ │ │ ├── use-animated-state.ts │ │ │ ├── use-animation.ts │ │ │ └── utils │ │ │ │ ├── default-transitions.ts │ │ │ │ ├── easing.ts │ │ │ │ ├── is-animatable.ts │ │ │ │ ├── is-animation-controls.ts │ │ │ │ ├── is-keyframes-target.ts │ │ │ │ ├── transitions.ts │ │ │ │ └── variant-resolvers.ts │ │ ├── components │ │ │ ├── AnimatePresence │ │ │ │ ├── AnimatePresence.svelte │ │ │ │ ├── PresenceChild │ │ │ │ │ ├── PresenceChild.svelte │ │ │ │ │ ├── index.ts │ │ │ │ │ └── types.ts │ │ │ │ ├── index.ts │ │ │ │ ├── type.spec-d.ts │ │ │ │ ├── types.ts │ │ │ │ └── use-presence.ts │ │ │ ├── AnimateSharedLayout │ │ │ │ ├── AnimateSharedLayout.svelte │ │ │ │ ├── index.ts │ │ │ │ ├── type.spec-d.ts │ │ │ │ ├── types.ts │ │ │ │ └── utils │ │ │ │ │ ├── batcher.ts │ │ │ │ │ ├── crossfader.ts │ │ │ │ │ ├── rotate.ts │ │ │ │ │ └── stack.ts │ │ │ ├── LazyMotion │ │ │ │ ├── LazyMotion.svelte │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── MotionConfig │ │ │ │ ├── MotionConfig.svelte │ │ │ │ ├── MotionConfigScaleCorrection.ts │ │ │ │ ├── index.ts │ │ │ │ └── type.spec-d.ts │ │ │ └── MotionDiv.svelte │ │ ├── context │ │ │ ├── DOMcontext.ts │ │ │ ├── LayoutGroupContext.ts │ │ │ ├── LazyContext.ts │ │ │ ├── MotionConfigContext.ts │ │ │ ├── MotionContext │ │ │ │ ├── MotionContext.svelte │ │ │ │ ├── MotionContextProvider.svelte │ │ │ │ ├── UseCreateMotionContext.svelte │ │ │ │ ├── create.ts │ │ │ │ ├── index.ts │ │ │ │ └── utils.ts │ │ │ ├── PresenceContext.ts │ │ │ ├── ScaleCorrectionProvider.svelte │ │ │ └── SharedLayoutContext.ts │ │ ├── events │ │ │ ├── UseDomEvent-type.spec-d.ts │ │ │ ├── UseDomEvent.svelte │ │ │ ├── UsePointerEvent.svelte │ │ │ ├── event-info.ts │ │ │ ├── types.ts │ │ │ ├── use-dom-event.ts │ │ │ ├── use-pointer-event.ts │ │ │ └── utils.ts │ │ ├── gestures │ │ │ ├── PanSession.ts │ │ │ ├── UseFocusGesture.svelte │ │ │ ├── UseGestures.svelte │ │ │ ├── UseHoverGesture.svelte │ │ │ ├── UsePanGesture.svelte │ │ │ ├── UseTapGesture.svelte │ │ │ ├── drag │ │ │ │ ├── UseDrag.svelte │ │ │ │ ├── UseDragControls.svelte │ │ │ │ ├── VisualElementDragControls.ts │ │ │ │ ├── types.ts │ │ │ │ ├── use-drag-controls.ts │ │ │ │ ├── use-drag.ts │ │ │ │ └── utils │ │ │ │ │ ├── constraints.ts │ │ │ │ │ └── lock.ts │ │ │ ├── types.ts │ │ │ ├── use-focus-gesture.ts │ │ │ ├── use-gestures.ts │ │ │ ├── use-hover-gesture.ts │ │ │ ├── use-pan-gesture.ts │ │ │ ├── use-tap-gesture.ts │ │ │ └── utils │ │ │ │ ├── event-type.ts │ │ │ │ └── is-node-or-child.ts │ │ ├── index.ts │ │ ├── motion │ │ │ ├── Motion.svelte │ │ │ ├── MotionSSR.svelte │ │ │ ├── features │ │ │ │ ├── AnimationState.svelte │ │ │ │ ├── Exit.svelte │ │ │ │ ├── UseFeatures.svelte │ │ │ │ ├── animations.ts │ │ │ │ ├── definitions.ts │ │ │ │ ├── drag.ts │ │ │ │ ├── gestures.ts │ │ │ │ ├── layout │ │ │ │ │ ├── Animate.svelte │ │ │ │ │ ├── Animate.ts │ │ │ │ │ ├── AnimateLayoutContextProvider.svelte │ │ │ │ │ ├── Measure.svelte │ │ │ │ │ ├── Measure.ts │ │ │ │ │ ├── MeasureContextProvider.svelte │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── types.ts │ │ │ │ │ └── utils.ts │ │ │ │ ├── types.ts │ │ │ │ └── use-features.ts │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── utils │ │ │ │ ├── UseLayoutId.svelte │ │ │ │ ├── UseVisualElement.svelte │ │ │ │ ├── UseVisualState.svelte │ │ │ │ ├── is-forced-motion-value.ts │ │ │ │ ├── make-renderless-component.ts │ │ │ │ ├── should-inhert-variant.ts │ │ │ │ ├── use-motion-ref.ts │ │ │ │ ├── use-visual-element.ts │ │ │ │ ├── use-visual-state.ts │ │ │ │ └── valid-prop.ts │ │ ├── render │ │ │ ├── dom │ │ │ │ ├── M-type.spec-d.ts │ │ │ │ ├── Motion-Proxy.svelte │ │ │ │ ├── Motion-type.spec-d.ts │ │ │ │ ├── UseRender.svelte │ │ │ │ ├── create-visual-element.ts │ │ │ │ ├── featureBundle.ts │ │ │ │ ├── motion-minimal.ts │ │ │ │ ├── motion-proxy.ts │ │ │ │ ├── motion.ts │ │ │ │ ├── projection │ │ │ │ │ ├── convert-to-relative.ts │ │ │ │ │ ├── default-scale-correctors.ts │ │ │ │ │ ├── measure.ts │ │ │ │ │ ├── relative-set.ts │ │ │ │ │ ├── scale-correction.ts │ │ │ │ │ ├── types.ts │ │ │ │ │ └── utils.ts │ │ │ │ ├── svg-visual-element.ts │ │ │ │ ├── types.ts │ │ │ │ ├── use-render.ts │ │ │ │ ├── utils │ │ │ │ │ ├── UseInitialMotionProps.svelte │ │ │ │ │ ├── batch-layout.ts │ │ │ │ │ ├── camel-to-dash.ts │ │ │ │ │ ├── create-config.ts │ │ │ │ │ ├── css-variables-conversion.ts │ │ │ │ │ ├── filter-props.ts │ │ │ │ │ ├── is-css-variable.ts │ │ │ │ │ ├── is-svg-component.ts │ │ │ │ │ ├── parse-dom-variant.ts │ │ │ │ │ ├── unit-conversion.ts │ │ │ │ │ ├── use-html-props.ts │ │ │ │ │ └── use-svg-props.ts │ │ │ │ └── value-types │ │ │ │ │ ├── animatable-none.ts │ │ │ │ │ ├── defaults.ts │ │ │ │ │ ├── dimensions.ts │ │ │ │ │ ├── find.ts │ │ │ │ │ ├── get-as-type.ts │ │ │ │ │ ├── number.ts │ │ │ │ │ ├── test.ts │ │ │ │ │ ├── type-auto.ts │ │ │ │ │ ├── type-int.ts │ │ │ │ │ └── types.ts │ │ │ ├── html │ │ │ │ ├── UseHTMLProps.svelte │ │ │ │ ├── UseInitialMotionValues.svelte │ │ │ │ ├── UseStyle.svelte │ │ │ │ ├── config-motion.ts │ │ │ │ ├── supported-elements.ts │ │ │ │ ├── types.ts │ │ │ │ ├── use-props.ts │ │ │ │ ├── utils │ │ │ │ │ ├── build-projection-transform.ts │ │ │ │ │ ├── build-styles.ts │ │ │ │ │ ├── build-transform.ts │ │ │ │ │ ├── create-render-state.ts │ │ │ │ │ ├── render.ts │ │ │ │ │ ├── scrape-motion-values.ts │ │ │ │ │ └── transform.ts │ │ │ │ └── visual-element.ts │ │ │ ├── index.ts │ │ │ ├── svg │ │ │ │ ├── UseSVGProps.svelte │ │ │ │ ├── config-motion.ts │ │ │ │ ├── lowercase-elements.ts │ │ │ │ ├── supported-elements.ts │ │ │ │ ├── types.ts │ │ │ │ ├── use-props.ts │ │ │ │ ├── utils │ │ │ │ │ ├── build-attrs.ts │ │ │ │ │ ├── camel-case-attrs.ts │ │ │ │ │ ├── create-render-state.ts │ │ │ │ │ ├── path.ts │ │ │ │ │ ├── render.ts │ │ │ │ │ ├── scrape-motion-values.ts │ │ │ │ │ └── transform-origin.ts │ │ │ │ └── visual-element.ts │ │ │ ├── types.ts │ │ │ └── utils │ │ │ │ ├── animation-state.ts │ │ │ │ ├── animation.ts │ │ │ │ ├── compare-by-depth.ts │ │ │ │ ├── flat-tree.ts │ │ │ │ ├── is-draggable.ts │ │ │ │ ├── lifecycles.ts │ │ │ │ ├── motion-values.ts │ │ │ │ ├── projection.ts │ │ │ │ ├── setters.ts │ │ │ │ ├── state.ts │ │ │ │ ├── types.ts │ │ │ │ └── variants.ts │ │ ├── types.ts │ │ ├── types │ │ │ └── geometry.ts │ │ ├── utils │ │ │ ├── UseUnmountEffect.svelte │ │ │ ├── array.ts │ │ │ ├── each-axis.ts │ │ │ ├── errors.ts │ │ │ ├── fix-process-env.ts │ │ │ ├── geometry │ │ │ │ ├── delta-apply.ts │ │ │ │ ├── delta-calc.ts │ │ │ │ └── index.ts │ │ │ ├── is-browser.ts │ │ │ ├── is-numerical-string.ts │ │ │ ├── is-ref-object.ts │ │ │ ├── noop.ts │ │ │ ├── resolve-value.ts │ │ │ ├── shallow-compare.ts │ │ │ ├── subscription-manager.ts │ │ │ ├── time-conversion.ts │ │ │ ├── transform.ts │ │ │ ├── use-cycle.ts │ │ │ ├── use-force-update.ts │ │ │ ├── use-reduced-motion.ts │ │ │ └── use-unmount-effect.ts │ │ └── value │ │ │ ├── index.ts │ │ │ ├── scroll │ │ │ ├── use-element-scroll.ts │ │ │ ├── use-viewport-scroll.ts │ │ │ └── utils.ts │ │ │ ├── use-combine-values.ts │ │ │ ├── use-motion-template.ts │ │ │ ├── use-motion-value.ts │ │ │ ├── use-spring.ts │ │ │ ├── use-transform.ts │ │ │ ├── use-velocity.ts │ │ │ └── utils │ │ │ ├── is-motion-value.ts │ │ │ └── resolve-motion-value.ts │ └── utils.ts └── routes │ ├── +layout.svelte │ ├── +page.svelte │ ├── docs │ └── +page.svelte │ └── tests │ └── +page.svelte ├── static ├── favicon.png ├── fonts │ ├── LICENSE.TXT │ ├── giest-mono.ttf │ └── giest-sans.ttf └── logo.webp ├── svelte.config.js ├── tailwind.config.ts ├── tsconfig.json └── vite.config.ts /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@3.0.3/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "public", 8 | "baseBranch": "origin/main", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [] 11 | } 12 | -------------------------------------------------------------------------------- /.github/workflows/main.yaml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - "**" 7 | pull_request: 8 | - main 9 | 10 | concurrency: 11 | group: ${{ github.workflow }}-${{ github.event.number || github.sha }} 12 | cancel-in-progress: true 13 | 14 | jobs: 15 | Check: 16 | name: Run svelte-check 17 | runs-on: ubuntu-latest 18 | steps: 19 | - uses: actions/checkout@v4 20 | - uses: oven-sh/setup-bun@v2 21 | with: 22 | bun-version: latest 23 | 24 | - name: Install Dependencies 25 | run: bun --bun install --frozen-lockfile 26 | 27 | - name: Run svelte-check 28 | run: bun --bun run check 29 | 30 | # Lint: 31 | # runs-on: ubuntu-latest 32 | # name: Lint 33 | # steps: 34 | # - uses: actions/checkout@v4 35 | # - uses: pnpm/action-setup@v4 36 | # - uses: actions/setup-node@v4 37 | # with: 38 | # node-version: 20 39 | # cache: pnpm 40 | 41 | # - name: Install dependencies 42 | # run: pnpm install 43 | 44 | # - run: pnpm lint 45 | 46 | Test: 47 | runs-on: ubuntu-latest 48 | steps: 49 | - uses: actions/checkout@v4 50 | - uses: oven-sh/setup-bun@v2 51 | with: 52 | bun-version: latest 53 | 54 | - name: Install Dependencies 55 | run: bun --bun install --frozen-lockfile 56 | 57 | - name: Run tests 58 | run: bun --bun run test -------------------------------------------------------------------------------- /.github/workflows/publish.yaml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | workflow_run: 5 | workflows: ["CI"] 6 | branches: [main] 7 | types: [completed] 8 | 9 | concurrency: ${{ github.workflow }}-${{ github.ref }} 10 | 11 | permissions: 12 | contents: write # to create release (changesets/action) 13 | pull-requests: write # to create pull request (changesets/action) 14 | 15 | jobs: 16 | publish: 17 | if: ${{ github.event.workflow_run.conclusion == 'success' }} 18 | runs-on: ubuntu-latest 19 | steps: 20 | - name: Checkout Repo 21 | uses: actions/checkout@v4 22 | with: 23 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 24 | fetch-depth: 0 25 | - uses: oven-sh/setup-bun@v2 26 | with: 27 | bun-version: latest 28 | 29 | - name: Install Dependencies 30 | run: bun --bun install --frozen-lockfile 31 | 32 | - name: Create Release Pull Request or Publish to npm 33 | id: changesets 34 | uses: changesets/action@v1 35 | with: 36 | publish: bun --bun release 37 | env: 38 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 39 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .pnpm-store 3 | bun.lockb 4 | /types/tsdoc-metadata.json 5 | 6 | # Output 7 | .output 8 | .vercel 9 | /.svelte-kit 10 | /build 11 | /dist 12 | 13 | # OS 14 | .DS_Store 15 | Thumbs.db 16 | 17 | # Env 18 | .env 19 | .env.* 20 | !.env.example 21 | !.env.test 22 | 23 | # Vite 24 | vite.config.js.timestamp-* 25 | vite.config.ts.timestamp-* 26 | *.vitest-temp.* 27 | bun.lockb 28 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "0.2.0", 3 | "configurations": [ 4 | { 5 | "name": "full stack chrome", 6 | "request": "launch", 7 | "type": "node", 8 | "runtimeArgs": ["--bun", "dev"], 9 | "runtimeExecutable": "bun", 10 | "console": "integratedTerminal", 11 | "skipFiles": ["/**"], 12 | "serverReadyAction": { 13 | "pattern": "\\bLocal:\\s+(https?://\\S+\\d)", 14 | "uriFormat": "%s/tests", 15 | "action": "debugWithChrome", 16 | "killOnServerStop": true 17 | } 18 | }, 19 | { 20 | "name": "full stack edge", 21 | "request": "launch", 22 | "type": "node", 23 | "runtimeArgs": ["--bun", "dev"], 24 | "runtimeExecutable": "bun", 25 | "console": "integratedTerminal", 26 | "skipFiles": ["/**"], 27 | "serverReadyAction": { 28 | "pattern": "\\bLocal:\\s+(https?://\\S+\\d)", 29 | "uriFormat": "%s/tests", 30 | "action": "debugWithEdge", 31 | "killOnServerStop": true 32 | } 33 | } 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # motion-start 2 | 3 | ## 0.1.15 4 | 5 | ### Patch Changes 6 | 7 | - 1f07118: revert 8 | 9 | ## 0.1.14 10 | 11 | ### Patch Changes 12 | 13 | - a1f2c47: fix svg not appearing with motion use 14 | 15 | ## 0.1.13 16 | 17 | ### Patch Changes 18 | 19 | - 39d3b8b: improve import consistancy and fix svelte repl 20 | 21 | ## 0.1.12 22 | 23 | ### Patch Changes 24 | 25 | - f8ab887: fix svelte repl usage 26 | 27 | ## 0.1.11 28 | 29 | ### Patch Changes 30 | 31 | - 6101a3b: remove main from package.json 32 | 33 | ## 0.1.10 34 | 35 | ### Patch Changes 36 | 37 | - b4fe2aa: correct exports to export svelte and js 38 | 39 | ## 0.1.9 40 | 41 | ### Patch Changes 42 | 43 | - c21ab29: export correct extensions 44 | 45 | ## 0.1.8 46 | 47 | ### Patch Changes 48 | 49 | - 071b96d: move dist files to src for import use 50 | 51 | ## 0.1.7 52 | 53 | ### Patch Changes 54 | 55 | - d8212b9: fix usage in svelte repl 56 | 57 | ## 0.1.6 58 | 59 | ### Patch Changes 60 | 61 | - b6f6602: add all files in dist to files property package.json 62 | 63 | ## 0.1.5 64 | 65 | ### Patch Changes 66 | 67 | - 2996dae: add back style-value-types just incase 68 | 69 | ## 0.1.4 70 | 71 | ### Patch Changes 72 | 73 | - 7f6010b: fix peer deps including melt-ui because of bits-ui dep 74 | 75 | ## 0.1.3 76 | 77 | ### Patch Changes 78 | 79 | - 61bcd64: fix export path for svelte comp 80 | 81 | ## 0.1.2 82 | 83 | ### Patch Changes 84 | 85 | - 25f1b6e: export MotionSSR 86 | 87 | ## 0.1.1 88 | 89 | ### Patch Changes 90 | 91 | - 98cfaba: chore: 🤖 release 92 | - 4f1b2e7: enable layout animation feature 93 | - 9f5a69c: fix layout animations 94 | 95 | ## 0.1.0 96 | 97 | ### Minor Changes 98 | 99 | - passing tests, handle minimal-motion for lazymotion,update API for motion to align more with framer-motion API usage 100 | 101 | ## 0.0.3 102 | 103 | ### Patch Changes 104 | 105 | - fix package source 106 | 107 | ## 0.0.2 108 | 109 | ### Patch Changes 110 | 111 | - 5492e7b: fix animations 112 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2021 Michael Lucht 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://shadcn-svelte.com/schema.json", 3 | "style": "default", 4 | "tailwind": { 5 | "config": "tailwind.config.ts", 6 | "css": "src/app.css", 7 | "baseColor": "slate" 8 | }, 9 | "aliases": { 10 | "components": "$lib/components", 11 | "utils": "$lib/utils" 12 | }, 13 | "typescript": true 14 | } -------------------------------------------------------------------------------- /src/app.d.ts: -------------------------------------------------------------------------------- 1 | // See https://kit.svelte.dev/docs/types#app 2 | // for information about these interfaces 3 | declare global { 4 | namespace App { 5 | // interface Error {} 6 | // interface Locals {} 7 | // interface PageData {} 8 | // interface PageState {} 9 | // interface Platform {} 10 | } 11 | } 12 | 13 | export {}; -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | %sveltekit.head% 8 | 9 | 10 |
%sveltekit.body%
11 | 12 | -------------------------------------------------------------------------------- /src/lib/components/Box.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 |
10 | 11 |
12 | -------------------------------------------------------------------------------- /src/lib/components/ComponentView.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 |
23 | {#if reRender} 24 |
25 | 49 |
50 | {/if} 51 | {#key rendering} 52 | 53 | {/key} 54 |
55 | -------------------------------------------------------------------------------- /src/lib/components/motion/AnimateLayout.svelte: -------------------------------------------------------------------------------- 1 | 17 | 18 |
21 | 22 | 31 | 32 | {#snippet failed(error, reset)} 33 |

broken, check console

34 | {/snippet} 35 | 36 |
37 | 38 | 67 | -------------------------------------------------------------------------------- /src/lib/components/motion/AnimatePresenceStack.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 |
11 | 12 | 13 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /src/lib/components/motion/AnimationSequence.svelte: -------------------------------------------------------------------------------- 1 | 23 | 24 | 25 | Tap 27 | 28 | -------------------------------------------------------------------------------- /src/lib/components/motion/ColorInterpolation.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 18 | 27 | Drag me 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/lib/components/motion/CyclingThroughStates.svelte: -------------------------------------------------------------------------------- 1 | 24 | 25 | 26 | { 35 | scale.next(); 36 | backgroundColor.next(); 37 | if (stateText === "State 1") { 38 | stateText = "State 2"; 39 | } else { 40 | stateText = "State 1"; 41 | } 42 | }} 43 | class="box" 44 | > 45 | {stateText} 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/lib/components/motion/Dock/Dock.svelte: -------------------------------------------------------------------------------- 1 | 39 | 40 | 41 | handleMouseMove(e)} 44 | onmouseleave={handleMouseLeave} 45 | class={dockClass} 46 | > 47 | 48 | 49 | Default 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/lib/components/motion/Dock/DockIcon.svelte: -------------------------------------------------------------------------------- 1 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /src/lib/components/motion/Dock/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Dock } from './Dock.svelte'; 2 | export { default as DockIcon } from './DockIcon.svelte'; 3 | -------------------------------------------------------------------------------- /src/lib/components/motion/Drag3DTransform.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 |
12 | 34 | 3D 36 |
37 | 38 | 39 | 51 | -------------------------------------------------------------------------------- /src/lib/components/motion/DragConstraints.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 |
11 | Smooth Drag 29 |
30 | 31 | -------------------------------------------------------------------------------- /src/lib/components/motion/DragTransform.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 31 | Drag 32 |
33 | 46 |
47 |
48 | 61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /src/lib/components/motion/DurBasedSpring.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {#key i} 10 | 21 | {/key} 22 |
23 | 45 |
46 | 47 | -------------------------------------------------------------------------------- /src/lib/components/motion/KeyFramesPosition.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | -------------------------------------------------------------------------------- /src/lib/components/motion/MorphSVG.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | 33 | 34 | -------------------------------------------------------------------------------- /src/lib/components/motion/Navbar.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 | 25 | {#each navs.navbar as item} 26 | 27 | 28 | 29 | 32 | 37 | 38 | 39 |

{item.label}

40 | 41 | 42 | 43 | 44 | {/each} 45 | 46 |
47 | -------------------------------------------------------------------------------- /src/lib/components/motion/Repeat.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | {#key i} 9 | 20 | {/key} 21 | 22 | -------------------------------------------------------------------------------- /src/lib/components/motion/ReverseEffect.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | {#key i} 9 | 20 | {/key} 21 | 22 | -------------------------------------------------------------------------------- /src/lib/components/motion/ScrollProgress.svelte: -------------------------------------------------------------------------------- 1 | 21 | 22 | 23 | 27 | 40 | {#each items as item (item)} 41 |
47 | {item} 48 |
49 | {/each} 50 | 51 | 52 | 62 | -------------------------------------------------------------------------------- /src/lib/components/motion/Spring.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | {#key i} 10 | 22 | {/key} 23 |
24 | 46 |
47 | 48 | -------------------------------------------------------------------------------- /src/lib/components/motion/Tweened.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | {#key i} 11 | 20 | {/key} 21 |
22 | 44 |
45 | 46 | -------------------------------------------------------------------------------- /src/lib/components/motion/WhileDragEffect.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | Drag 27 | 28 | -------------------------------------------------------------------------------- /src/lib/components/motion/WhileHoverEffect.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | Scale 13 | Hover Rotate 20 | BgColor 26 | 27 | -------------------------------------------------------------------------------- /src/lib/components/motion/WhileTapEffect.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | Rotate 14 | Simple 20 | 21 | -------------------------------------------------------------------------------- /src/lib/components/motion/index.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | export { default as AnimateLayout } from './AnimateLayout.svelte'; 3 | export { default as AnimatePresenceStack } from './AnimatePresenceStack.svelte'; 4 | export { default as AnimationSequence } from './AnimationSequence.svelte'; 5 | export { default as ColorInterpolation } from './ColorInterpolation.svelte'; 6 | export { default as CyclingThroughStates } from './CyclingThroughStates.svelte'; 7 | export { default as Drag3DTransform } from './Drag3DTransform.svelte'; 8 | export { default as DragConstraints } from './DragConstraints.svelte'; 9 | export { default as DragDirectionLocking } from './DragDirectionLocking.svelte'; 10 | export { default as DragTransform } from './DragTransform.svelte'; 11 | export { default as DurBasedSpring } from './DurBasedSpring.svelte'; 12 | export { default as KeyFramesPosition } from './KeyFramesPosition.svelte'; 13 | export { default as MorphSvg } from './MorphSVG.svelte'; 14 | export { default as Navbar } from './Navbar.svelte'; 15 | export { default as Repeat } from './Repeat.svelte'; 16 | export { default as ReverseEffect } from './ReverseEffect.svelte'; 17 | export { default as ScrollProgress } from './ScrollProgress.svelte'; 18 | export { default as Spring } from './Spring.svelte'; 19 | export { default as Tweened } from './Tweened.svelte'; 20 | export { default as WhileDragEffect } from './WhileDragEffect.svelte'; 21 | export { default as WhileHoverEffect } from './WhileHoverEffect.svelte'; 22 | export { default as WhileTapEffect } from './WhileTapEffect.svelte'; 23 | -------------------------------------------------------------------------------- /src/lib/components/ui/button/button.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | acc += (key && value) || '', "") 25 | : className) || void 0, 26 | }), 27 | )} 28 | type="button" 29 | {...$$restProps} 30 | on:click 31 | on:keydown 32 | > 33 | 34 | 35 | -------------------------------------------------------------------------------- /src/lib/components/ui/button/index.ts: -------------------------------------------------------------------------------- 1 | import { type VariantProps, tv } from "tailwind-variants"; 2 | import type { Button as ButtonPrimitive } from "bits-ui"; 3 | import Root from "./button.svelte"; 4 | 5 | const buttonVariants = tv({ 6 | base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 7 | variants: { 8 | variant: { 9 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 10 | destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", 11 | outline: 12 | "border-input bg-background hover:bg-accent hover:text-accent-foreground border", 13 | secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", 14 | ghost: "hover:bg-accent hover:text-accent-foreground", 15 | link: "text-primary underline-offset-4 hover:underline", 16 | }, 17 | size: { 18 | default: "h-10 px-4 py-2", 19 | sm: "h-9 rounded-md px-3", 20 | lg: "h-11 rounded-md px-8", 21 | icon: "h-10 w-10", 22 | }, 23 | }, 24 | defaultVariants: { 25 | variant: "default", 26 | size: "default", 27 | }, 28 | }); 29 | 30 | type Variant = VariantProps["variant"]; 31 | type Size = VariantProps["size"]; 32 | 33 | type Props = ButtonPrimitive.Props & { 34 | variant?: Variant; 35 | size?: Size; 36 | }; 37 | 38 | type Events = ButtonPrimitive.Events; 39 | 40 | export { 41 | Root, 42 | type Props, 43 | type Events, 44 | // 45 | Root as Button, 46 | type Props as ButtonProps, 47 | type Events as ButtonEvents, 48 | buttonVariants, 49 | }; 50 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-content.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-description.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |

12 | 13 |

14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-footer.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-header.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card-title.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/card.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
15 | 16 |
17 | -------------------------------------------------------------------------------- /src/lib/components/ui/card/index.ts: -------------------------------------------------------------------------------- 1 | import Root from "./card.svelte"; 2 | import Content from "./card-content.svelte"; 3 | import Description from "./card-description.svelte"; 4 | import Footer from "./card-footer.svelte"; 5 | import Header from "./card-header.svelte"; 6 | import Title from "./card-title.svelte"; 7 | 8 | export { 9 | Root, 10 | Content, 11 | Description, 12 | Footer, 13 | Header, 14 | Title, 15 | // 16 | Root as Card, 17 | Content as CardContent, 18 | Description as CardDescription, 19 | Footer as CardFooter, 20 | Header as CardHeader, 21 | Title as CardTitle, 22 | }; 23 | 24 | export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; 25 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-content.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 28 | 29 | 32 | 33 | Close 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-description.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-footer.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
15 | 16 |
17 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-header.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-overlay.svelte: -------------------------------------------------------------------------------- 1 | 15 | 16 | 22 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-portal.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/dialog-title.svelte: -------------------------------------------------------------------------------- 1 | 10 | 11 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/lib/components/ui/dialog/index.ts: -------------------------------------------------------------------------------- 1 | import { Dialog as DialogPrimitive } from "bits-ui"; 2 | 3 | import Title from "./dialog-title.svelte"; 4 | import Portal from "./dialog-portal.svelte"; 5 | import Footer from "./dialog-footer.svelte"; 6 | import Header from "./dialog-header.svelte"; 7 | import Overlay from "./dialog-overlay.svelte"; 8 | import Content from "./dialog-content.svelte"; 9 | import Description from "./dialog-description.svelte"; 10 | 11 | const Root = DialogPrimitive.Root; 12 | const Trigger = DialogPrimitive.Trigger; 13 | const Close = DialogPrimitive.Close; 14 | 15 | export { 16 | Root, 17 | Title, 18 | Portal, 19 | Footer, 20 | Header, 21 | Trigger, 22 | Overlay, 23 | Content, 24 | Description, 25 | Close, 26 | // 27 | Root as Dialog, 28 | Title as DialogTitle, 29 | Portal as DialogPortal, 30 | Footer as DialogFooter, 31 | Header as DialogHeader, 32 | Trigger as DialogTrigger, 33 | Overlay as DialogOverlay, 34 | Content as DialogContent, 35 | Description as DialogDescription, 36 | Close as DialogClose, 37 | }; 38 | -------------------------------------------------------------------------------- /src/lib/components/ui/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import { Tooltip as TooltipPrimitive } from "bits-ui"; 2 | import Content from "./tooltip-content.svelte"; 3 | 4 | const Root = TooltipPrimitive.Root; 5 | const Trigger = TooltipPrimitive.Trigger; 6 | 7 | export { 8 | Root, 9 | Trigger, 10 | Content, 11 | // 12 | Root as Tooltip, 13 | Content as TooltipContent, 14 | Trigger as TooltipTrigger, 15 | }; 16 | -------------------------------------------------------------------------------- /src/lib/components/ui/tooltip/tooltip-content.svelte: -------------------------------------------------------------------------------- 1 | 16 | 17 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/lib/motion-start/animation/UseAnimation.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /src/lib/motion-start/animation/use-animated-state.ts: -------------------------------------------------------------------------------- 1 | export {default as UseAnimatedState} from './UseAnimatedState.svelte'; -------------------------------------------------------------------------------- /src/lib/motion-start/animation/use-animation.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.0.3, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | import { tick } from "svelte"; 7 | import { animationControls } from "./animation-controls" 8 | 9 | /** 10 | * Creates `AnimationControls`, which can be used to manually start, stop 11 | * and sequence animations on one or more components. 12 | * 13 | * The returned `AnimationControls` should be passed to the `animate` property 14 | * of the components you want to animate. 15 | * 16 | * These components can then be animated with the `start` method. 17 | * 18 | * @library 19 | * 20 | * ```jsx 21 | * import * as React from 'react' 22 | * import { Frame, useAnimation } from 'framer' 23 | * 24 | * export function MyComponent(props) { 25 | * const controls = useAnimation() 26 | * 27 | * controls.start({ 28 | * x: 100, 29 | * transition: { duration: 0.5 }, 30 | * }) 31 | * 32 | * return 33 | * } 34 | * ``` 35 | * 36 | * @motion 37 | * 38 | * ```jsx 39 | * import * as React from 'react' 40 | * import { motion, useAnimation } from 'framer-motion' 41 | * 42 | * export function MyComponent(props) { 43 | * const controls = useAnimation() 44 | * 45 | * controls.start({ 46 | * x: 100, 47 | * transition: { duration: 0.5 }, 48 | * }) 49 | * 50 | * return 51 | * } 52 | * ``` 53 | * 54 | * @returns Animation controller with `start` and `stop` methods 55 | * 56 | * @public 57 | */ 58 | export const useAnimation = () => { 59 | 60 | const controls = animationControls(() => { 61 | 62 | const cleanup: any = {} 63 | tick().then(v => cleanup.clean = controls.mount()); 64 | return () => { 65 | cleanup.clean?.(); 66 | } 67 | }); 68 | 69 | return controls; 70 | } 71 | 72 | 73 | 74 | export { default as UseAnimation } from "./UseAnimation.svelte"; 75 | -------------------------------------------------------------------------------- /src/lib/motion-start/animation/utils/default-transitions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { PopmotionTransitionProps, ValueTarget, SingleTarget, KeyframesTarget } from '../../types'; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import { isKeyframesTarget } from './is-keyframes-target.js'; 12 | 13 | var underDampedSpring = () => ({ 14 | type: 'spring', 15 | stiffness: 500, 16 | damping: 25, 17 | restDelta: 0.5, 18 | restSpeed: 10, 19 | }); 20 | var criticallyDampedSpring = (to: SingleTarget) => ({ 21 | type: 'spring', 22 | stiffness: 550, 23 | damping: to === 0 ? 2 * Math.sqrt(550) : 30, 24 | restDelta: 0.01, 25 | restSpeed: 10, 26 | }); 27 | var linearTween = () => ({ 28 | type: 'keyframes', 29 | ease: 'linear', 30 | duration: 0.3, 31 | }); 32 | var keyframes = (values: KeyframesTarget) => ({ 33 | type: 'keyframes', 34 | duration: 0.8, 35 | values: values, 36 | }); 37 | var defaultTransitions = { 38 | x: underDampedSpring, 39 | y: underDampedSpring, 40 | z: underDampedSpring, 41 | rotate: underDampedSpring, 42 | rotateX: underDampedSpring, 43 | rotateY: underDampedSpring, 44 | rotateZ: underDampedSpring, 45 | scaleX: criticallyDampedSpring, 46 | scaleY: criticallyDampedSpring, 47 | scale: criticallyDampedSpring, 48 | opacity: linearTween, 49 | backgroundColor: linearTween, 50 | color: linearTween, 51 | default: criticallyDampedSpring, 52 | }; 53 | 54 | // TODO: need to bring closer to Transition - then can use keyof typeof defaultTransitions. 55 | var getDefaultTransition = (valueKey: string, to: ValueTarget): PopmotionTransitionProps => { 56 | var transitionFactory: (v: any) => any; 57 | if (isKeyframesTarget(to)) { 58 | transitionFactory = keyframes; 59 | } else { 60 | transitionFactory = (defaultTransitions as any)[valueKey] || defaultTransitions.default; 61 | } 62 | return Object.assign({ to: to }, transitionFactory(to)); 63 | }; 64 | 65 | export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring }; 66 | -------------------------------------------------------------------------------- /src/lib/motion-start/animation/utils/is-animatable.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ResolvedValueTarget } from "../../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import {fixed} from '../../utils/fix-process-env'; 13 | import { complex } from 'style-value-types'; 14 | 15 | /** 16 | * Check if a value is animatable. Examples: 17 | * 18 | * ✅: 100, "100px", "#fff" 19 | * ❌: "block", "url(2.jpg)" 20 | * @param value 21 | * 22 | * @internal 23 | */ 24 | var isAnimatable = function (key: string, value: ResolvedValueTarget) { 25 | // If the list of keys tat might be non-animatable grows, replace with Set 26 | if (key === "zIndex") 27 | return false; 28 | // If it's a number or a keyframes array, we can animate it. We might at some point 29 | // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this, 30 | // but for now lets leave it like this for performance reasons 31 | if (typeof value === "number" || Array.isArray(value)) 32 | return true; 33 | if (typeof value === "string" && // It's animatable if we have a string 34 | complex.test(value) && // And it contains numbers and/or colors 35 | !value.startsWith("url(") // Unless it starts with "url(" 36 | ) { 37 | return true; 38 | } 39 | return false; 40 | }; 41 | 42 | export { isAnimatable }; 43 | -------------------------------------------------------------------------------- /src/lib/motion-start/animation/utils/is-animation-controls.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { AnimationControls } from "../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | 13 | const isAnimationControls = (v?: any): v is AnimationControls => { 14 | return typeof v === "object" && typeof (v)?.start === "function" 15 | }; 16 | 17 | export { isAnimationControls }; 18 | -------------------------------------------------------------------------------- /src/lib/motion-start/animation/utils/is-keyframes-target.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ValueTarget, KeyframesTarget } from "../../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | 13 | const isKeyframesTarget = (v: ValueTarget): v is KeyframesTarget => { 14 | return Array.isArray(v); 15 | }; 16 | 17 | export { isKeyframesTarget }; 18 | -------------------------------------------------------------------------------- /src/lib/motion-start/animation/utils/variant-resolvers.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionValue } from '../../value/index.js'; 6 | type VariantNameList = string[]; 7 | type VariantName = string | VariantNameList; 8 | type UnresolvedVariant = VariantName | MotionValue; 9 | export type resolveVariantLabels = (variant?: UnresolvedVariant | undefined) => VariantNameList; 10 | /** 11 | * Hooks in React sometimes accept a dependency array as their final argument. (ie useEffect/useMemo) 12 | * When values in this array change, React re-runs the dependency. However if the array 13 | * contains a variable number of items, React throws an error. 14 | */ 15 | export type asDependencyList = (list: VariantNameList) => string[]; 16 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/AnimatePresence/PresenceChild/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | export type { PresenceChildProps } from "./types.js"; 7 | export {default as PresenceChild} from './PresenceChild.svelte'; -------------------------------------------------------------------------------- /src/lib/motion-start/components/AnimatePresence/PresenceChild/types.ts: -------------------------------------------------------------------------------- 1 | import type { Snippet } from 'svelte'; 2 | import type { VariantLabels } from '../../../motion/types'; 3 | export interface PresenceChildProps { 4 | children?: Snippet; 5 | isPresent: boolean; 6 | onExitComplete?: () => void; 7 | initial?: false | VariantLabels; 8 | custom?: any; 9 | presenceAffectsLayout: boolean; 10 | isCustom: boolean; 11 | } 12 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/AnimatePresence/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | export type { AnimatePresenceProps } from "./types.js"; 6 | /** 7 | * `AnimatePresence` enables the animation of components that have been removed from the tree. 8 | * 9 | * You can provide an array T[] to the `list` prop, where each item has to have a unique `key` attribute. Via slot prop `item` 10 | * single items of the array are passed down to children, so that for each array item one component is rendered. 11 | * 12 | * Alternatively you can leave `list` undefined and supply a boolean to the `show` prop. If `true`, the child is rendered. 13 | * 14 | * @motion 15 | * 16 | * Any `motion` components that have an `exit` property defined will animate out when removed from 17 | * the tree. 18 | * 19 | * ```jsx 20 | * import { motion, AnimatePresence } from 'svelte-motion' 21 | * const items = [ 22 | * {key:1}, 23 | * {key:2}, 24 | * {key:3} 25 | * ] 26 | * 27 | * 32 | * 33 | * ) 34 | * ``` 35 | * 36 | * You can sequence exit animations throughout a tree using variants. 37 | * 38 | * If a child contains multiple `Motion` components with `exit` props, it will only unmount the child 39 | * once all `motion` components have finished animating out. Likewise, any components using 40 | * `usePresence` all need to call `safeToRemove`. 41 | * 42 | * @public 43 | */ 44 | export type ConditionalGeneric = T extends {key:any} ? T : { key: 1}; // Better handling of defaults and the optional list prop 45 | export { default as AnimatePresence } from './AnimatePresence.svelte'; 46 | export { PresenceChild } from './PresenceChild/index.js'; -------------------------------------------------------------------------------- /src/lib/motion-start/components/AnimatePresence/type.spec-d.ts: -------------------------------------------------------------------------------- 1 | import type { Component } from 'svelte'; 2 | import type { AnimatePresenceProps } from './index.js'; 3 | import AnimatePresence from './AnimatePresence.svelte'; 4 | 5 | describe('test components type - svelte 5', () => { 6 | it('should have Svelte component type for AnimatePresence', () => { 7 | assertType>>(AnimatePresence); 8 | }); 9 | }); 10 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/AnimateSharedLayout/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | export { type SharedLayoutProps, Presence } from './types.js'; 7 | /** 8 | * Wrap several [#Motion] components with the \`layout\` or \`layoutId\` prop with this component, so that all react smoothly to the change of a single component. 9 | * @public 10 | */ 11 | export { default as AnimateSharedLayout } from './AnimateSharedLayout.svelte'; 12 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/AnimateSharedLayout/type.spec-d.ts: -------------------------------------------------------------------------------- 1 | import type { Component } from 'svelte'; 2 | import type { SharedLayoutProps } from './index.js'; 3 | import AnimateSharedLayout from './AnimateSharedLayout.svelte'; 4 | 5 | describe('test components type - svelte 5', () => { 6 | it('should have Svelte component type for AnimateSharedLayout', () => { 7 | assertType>(AnimateSharedLayout); 8 | }); 9 | }); -------------------------------------------------------------------------------- /src/lib/motion-start/components/AnimateSharedLayout/utils/rotate.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from '../../../render/types'; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | 12 | import { transformAxes } from '../../../render/html/utils/transform.js'; 13 | 14 | function resetRotate(child: VisualElement): void { 15 | // If there's no detected rotation values, we can early return without a forced render. 16 | var hasRotate = false; 17 | // Keep a record of all the values we've reset 18 | var resetValues = {}; 19 | // Check the rotate value of all axes and reset to 0 20 | for (var i = 0; i < transformAxes.length; i++) { 21 | var axis = transformAxes[i]; 22 | var key = 'rotate' + axis; 23 | // If this rotation doesn't exist as a motion value, then we don't 24 | // need to reset it 25 | if (!child.hasValue(key) || child.getStaticValue(key) === 0) continue; 26 | hasRotate = true; 27 | // Record the rotation and then temporarily set it to 0 28 | (resetValues as any)[key] = child.getStaticValue(key); 29 | child.setStaticValue(key, 0); 30 | } 31 | // If there's no rotation values, we don't need to do any more. 32 | if (!hasRotate) return; 33 | // Force a render of this element to apply the transform with all rotations 34 | // set to 0. 35 | child.syncRender(); 36 | // Put back all the values we reset 37 | for (var key in resetValues) { 38 | //@ts-error 39 | child.setStaticValue(key, (resetValues as any)[key]); 40 | } 41 | // Schedule a render for the next frame. This ensures we won't visually 42 | // see the element with the reset rotate value applied. 43 | child.scheduleRender(); 44 | } 45 | 46 | export { resetRotate }; 47 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/LazyMotion/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | export type { LazyProps } from "./types"; 6 | /** 7 | * Used in conjunction with the `m` component to reduce bundle size. 8 | * 9 | * `m` is a version of the `motion` component that only loads functionality 10 | * critical for the initial render. 11 | * 12 | * `LazyMotion` can then be used to either synchronously or asynchronously 13 | * load animation and gesture support. 14 | * 15 | * ```jsx 16 | * // Synchronous loading 17 | * import { LazyMotion, m, domAnimations } from "framer-motion" 18 | * 19 | * function App() { 20 | * return ( 21 | * 22 | * 23 | * 24 | * ) 25 | * } 26 | * 27 | * // Asynchronous loading 28 | * import { LazyMotion, m } from "framer-motion" 29 | * 30 | * function App() { 31 | * return ( 32 | * import('./path/to/domAnimations')}> 33 | * 34 | * 35 | * ) 36 | * } 37 | * ``` 38 | * 39 | * @public 40 | */ 41 | export {default as LazyMotion} from './LazyMotion.svelte'; 42 | 43 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/LazyMotion/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureBundle } from '../../motion/features/types'; 6 | export type LazyFeatureBundle = () => Promise; 7 | /** 8 | * @public 9 | */ 10 | export interface LazyProps { 11 | // children?: React.ReactNode; 12 | /** 13 | * Can be used to provide a feature bundle synchronously or asynchronously. 14 | * 15 | * ```jsx 16 | * // features.js 17 | * import { domAnimations } from "framer-motion" 18 | * export default domAnimations 19 | * 20 | * // index.js 21 | * import { LazyMotion, m } from "framer-motion" 22 | * 23 | * const loadFeatures = import("./features.js") 24 | * .then(res => res.default) 25 | * 26 | * function Component() { 27 | * return ( 28 | * 29 | * 30 | * 31 | * ) 32 | * } 33 | * ``` 34 | * 35 | * @public 36 | */ 37 | features: FeatureBundle | LazyFeatureBundle; 38 | /** 39 | * If `true`, will throw an error if a `motion` component renders within 40 | * a `LazyMotion` component. 41 | * 42 | * ```jsx 43 | * // This component will throw an error that explains using a motion component 44 | * // instead of the m component will break the benefits of code-splitting. 45 | * function Component() { 46 | * return ( 47 | * 48 | * 49 | * 50 | * ) 51 | * } 52 | * ``` 53 | * 54 | * @public 55 | */ 56 | strict?: boolean; 57 | } 58 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/MotionConfig/MotionConfigScaleCorrection.ts: -------------------------------------------------------------------------------- 1 | import { getContext } from 'svelte'; 2 | import { get, type Writable } from 'svelte/store'; 3 | // @ts-ignore 4 | import { ScaleCorrectionContext, ScaleCorrectionParentContext } from '../../context/ScaleCorrectionProvider.svelte'; 5 | import type { MotionContextProps } from '../../context/MotionContext/index.js' 6 | // '$lib/motion-start/context/MotionContext'; 7 | 8 | export const scaleCorrection = () => { 9 | const scaleCorrectionContext = getContext>(ScaleCorrectionContext); 10 | const scaleCorrectionParentContext = getContext>(ScaleCorrectionParentContext); 11 | const afterU = (nc = false) => { 12 | /* Second part of the updater calling in child layouts first.*/ 13 | const scc = get(scaleCorrectionContext); 14 | scc.forEach((v: { afterU: (arg0: boolean) => void }, i: any) => { 15 | v.afterU?.(true); 16 | }); 17 | }; 18 | 19 | const updater = () => { 20 | // in React the updater function is called on children first, in Svelte the child does not call it. 21 | // @ts-expect-error 22 | get(scaleCorrectionContext).forEach((v) => { 23 | v.updater?.(true); 24 | }); 25 | }; 26 | 27 | scaleCorrectionParentContext.update((v) => 28 | v.concat([ 29 | { 30 | updater, 31 | afterU, 32 | }, 33 | ]) 34 | ); 35 | 36 | return { 37 | update: updater, 38 | }; 39 | }; 40 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/MotionConfig/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionConfigContextObject } from "../../context/MotionConfigContext.js"; 6 | export type MotionConfigProps = Partial; 7 | /** 8 | * `MotionConfig` is used to set configuration options for all children `motion` components. 9 | * 10 | * ```jsx 11 | * import { MotionDiv, MotionConfig } from "svelte-motion" 12 | * 13 | * 14 | * 15 | * 16 | * ``` 17 | * 18 | * @public 19 | */ 20 | export {default as MotionConfig} from './MotionConfig.svelte'; 21 | -------------------------------------------------------------------------------- /src/lib/motion-start/components/MotionConfig/type.spec-d.ts: -------------------------------------------------------------------------------- 1 | import type { Component } from 'svelte'; 2 | import type { MotionConfigProps } from './index.js'; 3 | import MotionConfig from './MotionConfig.svelte'; 4 | 5 | describe('test components type - svelte 5', () => { 6 | it('should have Svelte component type for MotionConfig', () => { 7 | assertType>(MotionConfig); 8 | }); 9 | }); -------------------------------------------------------------------------------- /src/lib/motion-start/components/MotionDiv.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
8 | 9 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/DOMcontext.ts: -------------------------------------------------------------------------------- 1 | import type { Writable } from 'svelte/store'; 2 | import type { MotionContextProps } from './MotionContext'; 3 | import type { SharedLayoutSyncMethods } from '../components/AnimateSharedLayout/types'; 4 | 5 | export const getDomContext = ( 6 | name: string, 7 | el: any 8 | ): Writable | undefined => { 9 | if (!el || !window) { 10 | return undefined; 11 | } 12 | let par = el; 13 | while ((par = par.parentNode)) { 14 | if (par.motionDomContext && par.motionDomContext.has(name)) { 15 | return par.motionDomContext.get(name); 16 | } 17 | } 18 | return undefined; 19 | }; 20 | 21 | export const setDomContext = (name: string, el: any, value: any) => { 22 | if (el && window) { 23 | if (!el.motionDomContext) { 24 | el.motionDomContext = new Map(); 25 | } 26 | el.motionDomContext.set(name, value); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/LayoutGroupContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { Writable } from 'svelte/store' 6 | 7 | import { writable } from "svelte/store"; 8 | import { getDomContext } from "./DOMcontext"; 9 | 10 | /** 11 | * @internal 12 | */ 13 | // @ts-expect-error 14 | export const LayoutGroupContext = (c?: any): Writable => getDomContext("LayoutGroup",c)||writable(null); 15 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/LazyContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { CreateVisualElement } from '../render/types'; 6 | export interface LazyContextProps { 7 | renderer?: CreateVisualElement; 8 | strict: boolean; 9 | } 10 | 11 | import { writable, type Writable } from 'svelte/store'; 12 | import { getDomContext } from './DOMcontext'; 13 | // @ts-expect-error 14 | const LazyContext = (c?: any): Writable => getDomContext('Lazy', c) || writable({ strict: false }); 15 | 16 | export { LazyContext }; 17 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/MotionConfigContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { Writable } from "svelte/store"; 6 | import type { Transition } from "../types"; 7 | import type { TransformPoint2D } from "../types/geometry"; 8 | /** 9 | * @public 10 | */ 11 | export interface MotionConfigContextObject { 12 | /** 13 | * @internal 14 | */ 15 | transformPagePoint: TransformPoint2D; 16 | /** 17 | * Determines whether this is a static context ie the Framer canvas. If so, 18 | * it'll disable all dynamic functionality. 19 | * 20 | * @internal 21 | */ 22 | isStatic: boolean; 23 | /** 24 | * Defines a new default transition for the entire tree. 25 | * 26 | * @public 27 | */ 28 | transition?: Transition; 29 | } 30 | /** 31 | * @public 32 | */ 33 | // export declare const MotionConfigContext: () => Writable 34 | 35 | 36 | import { writable } from "svelte/store"; 37 | import { getDomContext } from "./DOMcontext"; 38 | 39 | 40 | /** 41 | * @public 42 | */ 43 | // @ts-expect-error 44 | var MotionConfigContext = (c?: any): Writable => getDomContext("MotionConfig", c) || writable({ 45 | transformPagePoint: function (p) { return p; }, 46 | isStatic: false, 47 | }); 48 | 49 | export { MotionConfigContext }; 50 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/MotionContext/MotionContext.svelte: -------------------------------------------------------------------------------- 1 | 3 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/MotionContext/MotionContextProvider.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/MotionContext/UseCreateMotionContext.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/MotionContext/create.ts: -------------------------------------------------------------------------------- 1 | export { default as UseCreateMotionContext } from './UseCreateMotionContext.svelte'; 2 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/MotionContext/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from "../../render/types"; 6 | import { getContext } from "svelte"; 7 | import { getDomContext } from "../DOMcontext"; 8 | import { writable } from "svelte/store"; 9 | 10 | export interface MotionContextProps { 11 | forEach?: any; 12 | visualElement?: VisualElement; 13 | initial?: false | string | string[]; 14 | animate?: string | string[]; 15 | } 16 | 17 | export const MotionContext = (c?: any) => 18 | getDomContext("Motion", c) || writable({}); 19 | 20 | export const useVisualElementContext = (c?: any) => { 21 | return (getContext(MotionContext) || MotionContext(c)) as 22 | | VisualElement 23 | | undefined; 24 | }; 25 | 26 | export { default as UseVisualElementContext } from "./MotionContext.svelte"; 27 | 28 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/MotionContext/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionContextProps } from "."; 6 | import type { MotionProps } from "../../motion/types"; 7 | 8 | 9 | /** 10 | based on framer-motion@4.0.3, 11 | Copyright (c) 2018 Framer B.V. 12 | */ 13 | 14 | import { checkIfControllingVariants, isVariantLabel } from '../../render/utils/variants.js'; 15 | 16 | function getCurrentTreeVariants(props: MotionProps, context: MotionContextProps) { 17 | if (checkIfControllingVariants(props)) { 18 | var initial = props.initial, animate = props.animate; 19 | return { 20 | initial: initial === false || isVariantLabel(initial) 21 | ? initial 22 | : undefined, 23 | animate: isVariantLabel(animate) ? animate : undefined, 24 | }; 25 | } 26 | return props.inherit !== false ? (context || {}) : {}; 27 | } 28 | 29 | export { getCurrentTreeVariants }; 30 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/PresenceContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VariantLabels } from "../motion/types"; 6 | import type { Writable } from 'svelte/store' 7 | /** 8 | * @public 9 | */ 10 | export interface PresenceContextProps { 11 | id: number; 12 | isPresent: boolean; 13 | register: (id: number) => () => void; 14 | onExitComplete?: (id: number) => void; 15 | initial?: false | VariantLabels; 16 | custom?: any; 17 | } 18 | 19 | import { writable } from "svelte/store"; 20 | import { getDomContext } from "./DOMcontext"; 21 | 22 | 23 | /** 24 | * @public 25 | */ 26 | // @ts-expect-error 27 | export const PresenceContext = (c?: any): Writable => getDomContext("Presence", c) || writable(null); 28 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/ScaleCorrectionProvider.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/lib/motion-start/context/SharedLayoutContext.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { Writable } from 'svelte/store'; 6 | import type { SharedLayoutSyncMethods, SyncLayoutBatcher } from '../components/AnimateSharedLayout/types'; 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | 13 | import { writable } from 'svelte/store'; 14 | import { createBatcher } from '../components/AnimateSharedLayout/utils/batcher.js'; 15 | import { getDomContext } from './DOMcontext.js'; 16 | function SharedLayoutContext(custom?: any): Writable | Writable { 17 | return (getDomContext('SharedLayout', custom) as any satisfies SharedLayoutSyncMethods) || writable(createBatcher()); 18 | } 19 | 20 | /** 21 | * @internal 22 | */ 23 | var FramerTreeLayoutContext = (isCustom?: any) => writable(createBatcher()); 24 | 25 | function isSharedLayout(context: SyncLayoutBatcher | SharedLayoutSyncMethods): context is SharedLayoutSyncMethods { 26 | return 'forceUpdate' in context; 27 | } 28 | 29 | export { FramerTreeLayoutContext, SharedLayoutContext, isSharedLayout }; 30 | -------------------------------------------------------------------------------- /src/lib/motion-start/events/UseDomEvent-type.spec-d.ts: -------------------------------------------------------------------------------- 1 | import type { Component } from 'svelte'; 2 | import type { UseDomEventProps } from './use-dom-event.js'; 3 | import UseDomEvent from './UseDomEvent.svelte'; 4 | 5 | describe('test components type - svelte 5', () => { 6 | it('should have Svelte component type for UseDomEvent', () => { 7 | assertType>(UseDomEvent); 8 | }); 9 | }); -------------------------------------------------------------------------------- /src/lib/motion-start/events/UseDomEvent.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 65 | 66 | {@render children?.()} 67 | -------------------------------------------------------------------------------- /src/lib/motion-start/events/UsePointerEvent.svelte: -------------------------------------------------------------------------------- 1 | 3 | 14 | 15 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/events/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { Point2D } from '../types/geometry'; 6 | 7 | /** @public */ 8 | export interface EventInfo { 9 | point: Point2D; 10 | } 11 | export type EventHandler = (event: MouseEvent | TouchEvent | PointerEvent, info: EventInfo) => void; 12 | export type ListenerControls = [() => void, () => void]; 13 | export type TargetOrRef = EventTarget | { current: EventTarget | null }; 14 | export type TargetBasedReturnType = Target extends EventTarget ? ListenerControls : undefined; 15 | -------------------------------------------------------------------------------- /src/lib/motion-start/events/use-dom-event.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from "../index.js"; 6 | export interface UseDomEventProps { 7 | /** 8 | * Ref object that's been provided to the element you want to bind the listener to. 9 | */ 10 | ref: { current: Node } | VisualElement, 11 | /** 12 | * Name of the event you want listen for. 13 | */ 14 | eventName: string, 15 | /** 16 | * Function to fire when receiving the event. 17 | */ 18 | handler?: EventListener, 19 | /** 20 | * Options to pass to `Event.addEventListener`. 21 | */ 22 | options?: AddEventListenerOptions 23 | } 24 | /** 25 | * Attaches an event listener directly to the provided DOM element. 26 | * 27 | * Bypassing Sveltes's event system can be desirable, for instance when attaching non-passive 28 | * event handlers. 29 | * 30 | * ```jsx 31 | * 35 | * 36 | * 37 | *
38 | * ``` 39 | * 40 | * @param ref - React.RefObject that's been provided to the element you want to bind the listener to. 41 | * @param eventName - Name of the event you want listen for. 42 | * @param handler - Function to fire when receiving the event. 43 | * @param options - Options to pass to `Event.addEventListener`. 44 | * 45 | * @public 46 | */ 47 | 48 | export function addDomEvent( 49 | target: EventTarget, 50 | eventName: string, 51 | handler: EventListener, 52 | options?: AddEventListenerOptions 53 | ) { 54 | target.addEventListener(eventName, handler, options); 55 | return function () { 56 | return target.removeEventListener(eventName, handler, options); 57 | }; 58 | } 59 | export { default as UseDomEvent } from './UseDomEvent.svelte'; 60 | 61 | -------------------------------------------------------------------------------- /src/lib/motion-start/events/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | 12 | import { isBrowser } from '../utils/is-browser.js'; 13 | 14 | // We check for event support via functions in case they've been mocked by a testing suite. 15 | var supportsPointerEvents = function () { 16 | return isBrowser && window.onpointerdown === null; 17 | }; 18 | var supportsTouchEvents = function () { 19 | return isBrowser && window.ontouchstart === null; 20 | }; 21 | var supportsMouseEvents = function () { 22 | return isBrowser && window.onmousedown === null; 23 | }; 24 | 25 | export { supportsMouseEvents, supportsPointerEvents, supportsTouchEvents }; 26 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/UseFocusGesture.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 18 | 19 | 24 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/UseGestures.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/UseHoverGesture.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 16 | 17 | 28 | 29 | 36 | 43 | 44 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/UsePanGesture.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 52 | 53 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/drag/UseDrag.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 49 | 50 | {@render children?.()} 51 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/drag/UseDragControls.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 8 | 9 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/drag/use-drag.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../../motion/features/types"; 6 | /** 7 | * A hook that allows an element to be dragged. 8 | * 9 | * @internal 10 | */ 11 | export type useDrag = (props: FeatureProps) => void; 12 | 13 | 14 | export { default as UseDrag } from './UseDrag.svelte'; 15 | 16 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/use-focus-gesture.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../motion/features/types"; 6 | /** 7 | * 8 | * @param props 9 | * @param ref 10 | * @internal 11 | */ 12 | export type useFocusGesture = ({ whileFocus, visualElement }: FeatureProps | any) => void; 13 | 14 | 15 | export { default as UseFocusGesture } from './UseFocusGesture.svelte'; 16 | 17 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/use-gestures.ts: -------------------------------------------------------------------------------- 1 | 2 | export { default as UseGestures } from "./UseGestures.svelte"; 3 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/use-hover-gesture.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../motion/features/types"; 6 | export type useHoverGesture = ({ onHoverStart, onHoverEnd, whileHover, visualElement, }: FeatureProps | any) => void; 7 | 8 | 9 | export { default as UseHoverGesture } from './UseHoverGesture.svelte'; 10 | 11 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/use-pan-gesture.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../motion/features/types"; 6 | /** 7 | * 8 | * @param handlers - 9 | * @param ref - 10 | * 11 | * @internalremarks 12 | * Currently this sets new pan gesture functions every render. The memo route has been explored 13 | * in the past but ultimately we're still creating new functions every render. An optimisation 14 | * to explore is creating the pan gestures and loading them into a `ref`. 15 | * 16 | * @internal 17 | */ 18 | export type usePanGesture = ({ onPan, onPanStart, onPanEnd, onPanSessionStart, visualElement, }: FeatureProps | any) => void; 19 | 20 | 21 | export { default as UsePanGesture } from './UsePanGesture.svelte'; 22 | 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/use-tap-gesture.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../motion/features/types"; 6 | /** 7 | * @param handlers - 8 | * @internal 9 | */ 10 | export type useTapGesture = ({ onTap, onTapStart, onTapCancel, whileTap, visualElement, }: FeatureProps | any) => void; 11 | 12 | 13 | export { default as UseTapGesture } from './UseTapGesture.svelte'; 14 | 15 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/utils/event-type.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | 12 | function isMouseEvent(event: MouseEvent | TouchEvent | PointerEvent): event is MouseEvent { 13 | // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check. 14 | if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) { 15 | return !!(event.pointerType === "mouse"); 16 | } 17 | return event instanceof MouseEvent; 18 | } 19 | function isTouchEvent(event: MouseEvent | TouchEvent | PointerEvent): event is TouchEvent { 20 | var hasTouches = !!(event as any).touches; 21 | return hasTouches; 22 | } 23 | 24 | export { isMouseEvent, isTouchEvent }; 25 | -------------------------------------------------------------------------------- /src/lib/motion-start/gestures/utils/is-node-or-child.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | 12 | /** 13 | * Recursively traverse up the tree to check whether the provided child node 14 | * is the parent or a descendant of it. 15 | * 16 | * @param parent - Element to find 17 | * @param child - Element to test against parent 18 | */ 19 | // @ts-expect-error 20 | var isNodeOrChild = function (parent: Element, child?: Element | null | undefined) { 21 | if (!child) { 22 | return false; 23 | } 24 | else if (parent === child) { 25 | return true; 26 | } 27 | else { 28 | return isNodeOrChild(parent, child.parentElement); 29 | } 30 | }; 31 | 32 | export { isNodeOrChild }; 33 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/AnimationState.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 30 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/Exit.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 42 | 43 | {@render children?.()} 44 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/UseFeatures.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 36 | 37 | {#if visualElement} 38 | 39 | {/if} 40 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/animations.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureComponents } from './types'; 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | 11 | import AnimationState from './AnimationState.svelte'; 12 | import Exit from './Exit.svelte'; 13 | /** 14 | * @public 15 | */ 16 | const animations: FeatureComponents = { 17 | animation: AnimationState, 18 | exit: Exit , 19 | }; 20 | 21 | export { animations }; 22 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/definitions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureComponents, FeatureDefinitions } from "./types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | 13 | var createDefinition = function (propNames: string[]) { 14 | return ({ 15 | isEnabled: function (props: any) { return propNames.some(function (name) { return !!props[name]; }); }, 16 | }); 17 | }; 18 | var featureDefinitions = { 19 | measureLayout: createDefinition(["layout", "layoutId", "drag"]), 20 | animation: createDefinition([ 21 | "animate", 22 | "exit", 23 | "variants", 24 | "whileHover", 25 | "whileTap", 26 | "whileFocus", 27 | "whileDrag", 28 | ]), 29 | exit: createDefinition(["exit"]), 30 | drag: createDefinition(["drag", "dragControls"]), 31 | focus: createDefinition(["whileFocus"]), 32 | hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]), 33 | tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]), 34 | pan: createDefinition([ 35 | "onPan", 36 | "onPanStart", 37 | "onPanSessionStart", 38 | "onPanEnd", 39 | ]), 40 | layoutAnimation: createDefinition(["layout", "layoutId"]), 41 | } satisfies FeatureDefinitions; 42 | function loadFeatures(features: FeatureComponents): void { 43 | for (var key in features) { 44 | var Component = (features as any)[key]; 45 | if (Component !== null) { 46 | (featureDefinitions as any)[key].Component = Component; 47 | } 48 | } 49 | } 50 | 51 | export { featureDefinitions, loadFeatures }; 52 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/drag.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureComponents } from "./types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | 13 | import { UsePanGesture } from '../../gestures/use-pan-gesture.js'; 14 | import { UseDrag } from '../../gestures/drag/use-drag.js'; 15 | 16 | /** 17 | * @public 18 | */ 19 | const drag:FeatureComponents = { 20 | pan: UsePanGesture, 21 | drag: UseDrag 22 | } 23 | 24 | export { drag }; 25 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/gestures.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureComponents } from "./types"; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | 12 | import { UseFocusGesture } from '../../gestures/use-focus-gesture.js'; 13 | import { UseHoverGesture } from '../../gestures/use-hover-gesture.js'; 14 | import { UseTapGesture } from '../../gestures/use-tap-gesture.js'; 15 | /** 16 | * @public 17 | */ 18 | const gestureAnimations: FeatureComponents = { 19 | tap: UseTapGesture, 20 | focus: UseFocusGesture, 21 | hover: UseHoverGesture, 22 | }; 23 | 24 | export { gestureAnimations }; 25 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/layout/Animate.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../types"; 6 | // export declare function AnimateLayoutContextProvider(props: FeatureProps): JSX.Element; 7 | 8 | 9 | export {default as AnimateLayoutContextProvider} from './AnimateLayoutContextProvider.svelte' -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/layout/AnimateLayoutContextProvider.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/layout/Measure.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../types"; 6 | // export declare function MeasureContextProvider(props: FeatureProps): JSX.Element; 7 | 8 | 9 | export {default as MeasureContextProvider} from './MeasureContextProvider.svelte' -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/layout/MeasureContextProvider.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 29 | 30 | 36 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/layout/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureComponents } from '../types'; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | 12 | import { AnimateLayoutContextProvider } from './Animate.js'; 13 | import { MeasureContextProvider } from './Measure.js'; 14 | 15 | 16 | var layoutAnimations: FeatureComponents = { 17 | measureLayout: MeasureContextProvider, 18 | layoutAnimation: AnimateLayoutContextProvider, 19 | }; 20 | 21 | export { layoutAnimations }; 22 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/layout/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { Axis, AxisBox2D } from "../../../types/geometry"; 6 | interface WithLayoutId { 7 | getLayoutId: () => undefined | string; 8 | } 9 | 10 | /** 11 | based on framer-motion@4.1.11, 12 | Copyright (c) 2018 Framer B.V. 13 | */ 14 | import {fixed} from '../../../utils/fix-process-env'; 15 | import { mix } from 'popmotion'; 16 | 17 | function tweenAxis(target: Axis, prev: Axis, next: Axis, p: number) { 18 | target.min = mix(prev.min, next.min, p); 19 | target.max = mix(prev.max, next.max, p); 20 | } 21 | function calcRelativeOffsetAxis(parent: Axis, child: Axis) { 22 | return { 23 | min: child.min - parent.min, 24 | max: child.max - parent.min, 25 | }; 26 | } 27 | function calcRelativeOffset(parent: AxisBox2D, child: AxisBox2D) { 28 | return { 29 | x: calcRelativeOffsetAxis(parent.x, child.x), 30 | y: calcRelativeOffsetAxis(parent.y, child.y), 31 | }; 32 | } 33 | function checkIfParentHasChanged(prev: WithLayoutId, next: WithLayoutId) { 34 | var prevId = prev.getLayoutId(); 35 | var nextId = next.getLayoutId(); 36 | return prevId !== nextId || (nextId === undefined && prev !== next); 37 | } 38 | 39 | export { calcRelativeOffset, calcRelativeOffsetAxis, checkIfParentHasChanged, tweenAxis }; 40 | 41 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { Component, Snippet } from 'svelte'; 6 | import type { CreateVisualElement, VisualElement } from '../../render/types'; 7 | import type { MotionProps, Ref } from '../types'; 8 | import type { VisualState } from '../utils/use-visual-state'; 9 | /** 10 | * @public 11 | */ 12 | export interface FeatureProps { 13 | props: MotionProps; 14 | visualElement: VisualElement; 15 | isCustom: any; 16 | children: Snippet; 17 | } 18 | export type FeatureNames = { 19 | animation: true; 20 | exit: true; 21 | drag: true; 22 | tap: true; 23 | focus: true; 24 | hover: true; 25 | pan: true; 26 | layoutAnimation: true; 27 | measureLayout: true; 28 | }; 29 | export type FeatureComponent = Component; 30 | /** 31 | * @public 32 | */ 33 | export interface FeatureDefinition { 34 | isEnabled: (props: MotionProps) => boolean; 35 | Component?: FeatureComponent; 36 | } 37 | export interface FeatureComponents { 38 | animation?: FeatureComponent; 39 | exit?: FeatureComponent; 40 | drag?: FeatureComponent; 41 | tap?: FeatureComponent; 42 | focus?: FeatureComponent; 43 | hover?: FeatureComponent; 44 | pan?: FeatureComponent; 45 | layoutAnimation?: FeatureComponent; 46 | measureLayout?: FeatureComponent; 47 | } 48 | export interface FeatureBundle extends FeatureComponents { 49 | renderer: CreateVisualElement; 50 | } 51 | export type LazyFeatureBundle = () => Promise; 52 | export type FeatureDefinitions = { 53 | [K in keyof FeatureNames]: FeatureDefinition; 54 | }; 55 | 56 | export type RenderComponent = ( 57 | Component: string | Component, 58 | props: MotionProps, 59 | ref: Ref, 60 | visualState: VisualState, 61 | isStatic: boolean 62 | ) => any; 63 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/features/use-features.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionProps } from "../.."; 6 | export type isForcedMotionValue = (key: string, { layout, layoutId }: MotionProps) => boolean; 7 | 8 | 9 | /** 10 | * Load features via renderless components based on the provided MotionProps. 11 | * TODO: Look into porting this to a component-less appraoch. 12 | */ 13 | 14 | 15 | export { default as UseFeatures } from './UseFeatures.svelte'; 16 | 17 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/UseLayoutId.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 14 | 15 | 20 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/is-forced-motion-value.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionProps } from "../.."; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { valueScaleCorrection } from '../../render/dom/projection/scale-correction.js'; 13 | import { isTransformOriginProp, isTransformProp } from '../../render/html/utils/transform.js'; 14 | 15 | function isForcedMotionValue(key: string, _a: { layout?: MotionProps['layout'], layoutId?: MotionProps['layoutId'] }): boolean { 16 | var layout = _a.layout, layoutId = _a.layoutId; 17 | return (isTransformProp(key) || 18 | isTransformOriginProp(key) || 19 | ((layout || layoutId !== undefined) && !!valueScaleCorrection[key])); 20 | } 21 | 22 | export { isForcedMotionValue }; 23 | 24 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/make-renderless-component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { FeatureProps } from "../features/types"; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | 12 | var makeRenderlessComponent = function

(hook: Function) { return function (props: P) { 13 | hook(props); 14 | return null; 15 | }; }; 16 | 17 | export { makeRenderlessComponent }; 18 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/should-inhert-variant.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionProps } from "../types"; 6 | export type checkShouldInheritVariant = ({ animate, variants, inherit, }: MotionProps) => boolean; 7 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/use-motion-ref.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from '../../render/types'; 6 | import type { VisualState } from './use-visual-state'; 7 | import type { Ref } from '../types'; 8 | 9 | /** 10 | based on framer-motion@4.0.3, 11 | Copyright (c) 2018 Framer B.V. 12 | */ 13 | 14 | import { isRefObject } from '../../utils/is-ref-object.js'; 15 | 16 | /** 17 | * Creates a ref function that, when called, hydrates the provided 18 | * external ref and VisualElement. 19 | */ 20 | function useMotionRef( 21 | visualState: VisualState, 22 | visualElement?: VisualElement | null, 23 | externalRef?: Ref 24 | ): Ref { 25 | return (instance) => { 26 | var _a; 27 | instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance)); 28 | if (visualElement) { 29 | instance ? visualElement.mount(instance) : visualElement.unmount(); 30 | } 31 | if (externalRef) { 32 | if (typeof externalRef === 'function') { 33 | externalRef(instance); 34 | } else if (isRefObject(externalRef)) {// @ts-expect-error 35 | externalRef.current = instance; 36 | } 37 | } 38 | }; 39 | } 40 | 41 | export { useMotionRef }; 42 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/use-visual-element.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionProps } from '../types'; 6 | import type { CreateVisualElement, VisualElement } from '../../render/types'; 7 | import type { VisualState } from './use-visual-state'; 8 | import type { Component } from 'svelte'; 9 | 10 | export type useVisualElement = ( 11 | Component: string | Component, 12 | visualState: VisualState, 13 | props: MotionProps, 14 | createVisualElement?: CreateVisualElement 15 | ) => VisualElement | undefined; 16 | 17 | export { default as UseVisualElement } from './UseVisualElement.svelte'; 18 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/use-visual-state.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ResolvedValues, ScrapeMotionValuesFromProps } from '../../render/types'; 6 | import type { MotionProps } from '../types'; 7 | import { default as UseVisualStateComp } from './UseVisualState.svelte'; 8 | 9 | export interface VisualState { 10 | renderState: RenderState; 11 | latestValues: ResolvedValues; 12 | mount?: (instance: Instance) => void; 13 | } 14 | export interface UseVisualStateConfig { 15 | scrapeMotionValuesFromProps: ScrapeMotionValuesFromProps; 16 | createRenderState: () => RenderState; 17 | onMount?: (props: MotionProps, instance: Instance, visualState: VisualState) => void; 18 | } 19 | export type makeUseVisualState = (config: UseVisualStateConfig) => UseVisualState; 20 | 21 | export type UseVisualState = ( 22 | props: MotionProps, 23 | isStatic: boolean 24 | ) => VisualState; 25 | 26 | export const UseVisualState = UseVisualStateComp as typeof UseVisualStateComp; 27 | -------------------------------------------------------------------------------- /src/lib/motion-start/motion/utils/valid-prop.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | /** 12 | * A list of all valid MotionProps. 13 | * 14 | * @internalremarks 15 | * This doesn't throw if a `MotionProp` name is missing - it should. 16 | */ 17 | var validMotionProps = new Set([ 18 | "initial", 19 | "animate", 20 | "exit", 21 | "style", 22 | "variants", 23 | "transition", 24 | "transformTemplate", 25 | "transformValues", 26 | "custom", 27 | "inherit", 28 | "layout", 29 | "layoutId", 30 | "onLayoutAnimationComplete", 31 | "onViewportBoxUpdate", 32 | "onLayoutMeasure", 33 | "onBeforeLayoutMeasure", 34 | "onAnimationStart", 35 | "onAnimationComplete", 36 | "onUpdate", 37 | "onDragStart", 38 | "onDrag", 39 | "onDragEnd", 40 | "onMeasureDragConstraints", 41 | "onDirectionLock", 42 | "onDragTransitionEnd", 43 | "drag", 44 | "dragControls", 45 | "dragListener", 46 | "dragConstraints", 47 | "dragDirectionLock", 48 | "_dragX", 49 | "_dragY", 50 | "dragElastic", 51 | "dragMomentum", 52 | "dragPropagation", 53 | "dragTransition", 54 | "whileDrag", 55 | "onPan", 56 | "onPanStart", 57 | "onPanEnd", 58 | "onPanSessionStart", 59 | "onTap", 60 | "onTapStart", 61 | "onTapCancel", 62 | "onHoverStart", 63 | "onHoverEnd", 64 | "whileFocus", 65 | "whileTap", 66 | "whileHover", 67 | ]); 68 | /** 69 | * Check whether a prop name is a valid `MotionProp` key. 70 | * 71 | * @param key - Name of the property to check 72 | * @returns `true` is key is a valid `MotionProp`. 73 | * 74 | * @public 75 | */ 76 | function isValidMotionProp(key: string): boolean { 77 | return validMotionProps.has(key); 78 | } 79 | 80 | export { isValidMotionProp }; 81 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/M-type.spec-d.ts: -------------------------------------------------------------------------------- 1 | import type { Component } from 'svelte'; 2 | import type { CustomMotionComponentConfig } from './motion-proxy.js'; 3 | import type { MotionProps } from '../../motion/types.js'; 4 | import type { IsSVG } from './motion.js'; 5 | import { m } from './motion-minimal.js'; 6 | 7 | describe('test components type - svelte 5', () => { 8 | it('should have Svelte component type for M', () => { 9 | assertType>(m.div.prototype); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/Motion-Proxy.svelte: -------------------------------------------------------------------------------- 1 | 2 | 11 | 12 | 13 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/Motion-type.spec-d.ts: -------------------------------------------------------------------------------- 1 | import type { Component } from 'svelte'; 2 | import type { CustomMotionComponentConfig } from './motion-proxy.js'; 3 | import type { MotionProps } from '../../motion/types.js'; 4 | import type { IsSVG } from './motion.js'; 5 | import { motion } from './motion.js'; 6 | 7 | describe('test components type - svelte 5', () => { 8 | it('should have Svelte component type for Motion', () => { 9 | assertType>(motion.div.prototype); 10 | }); 11 | }); 12 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/UseRender.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 28 | 29 | 35 | {#snippet children(visualProps: any)} 36 | 37 | {/snippet} 38 | 39 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/create-visual-element.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { CreateVisualElement } from "../types"; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import { htmlVisualElement } from '../html/visual-element.js'; 12 | import { svgVisualElement } from '../svg/visual-element.js'; 13 | 14 | 15 | var createDomVisualElement: CreateVisualElement = function (Component, options) { 16 | 17 | return Component === "SVG" 18 | ? svgVisualElement(options!, { enableHardwareAcceleration: false }) 19 | : htmlVisualElement(options!, { enableHardwareAcceleration: true }); 20 | }; 21 | 22 | export { createDomVisualElement }; 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/featureBundle.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | // import type { FeatureBundle } from "../../motion/features/types"; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import { animations } from '../../motion/features/animations'; 12 | import { drag } from '../../motion/features/drag'; 13 | import { gestureAnimations } from '../../motion/features/gestures'; 14 | import { layoutAnimations } from '../../motion/features/layout'; 15 | 16 | export const featureBundle = { 17 | ...animations, 18 | ...gestureAnimations, 19 | ...drag, 20 | ...layoutAnimations, 21 | }; 22 | 23 | export { animations, drag, gestureAnimations }; 24 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/motion-minimal.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | import { animations } from './featureBundle.js'; 11 | import { createMotionProxy } from './motion-proxy.js'; 12 | // import { createMotionClass } from './create-motion-class.js'; 13 | 14 | /** 15 | * @public 16 | */ 17 | var m = /*@__PURE__*/ createMotionProxy({ ...animations }); 18 | // createMotionClass({ ...layoutAnimations }) as unknown as (>( 19 | // Component: string | import('svelte').Component, 20 | // customMotionComponentConfig?: import('./motion-proxy.js').CustomMotionComponentConfig 21 | // ) => import('./motion-proxy.js').CustomDomComponent) & 22 | // import('../html/types.js').HTMLMotionComponents & 23 | // import('../svg/types.js').SVGMotionComponents; 24 | 25 | export { m }; 26 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/projection/convert-to-relative.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from "../../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.1.11, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | 13 | import { calcRelativeOffset } from '../../../motion/features/layout/utils.js'; 14 | import { eachAxis } from '../../../utils/each-axis.js'; 15 | import { removeBoxTransforms } from '../../../utils/geometry/delta-apply.js'; 16 | import type { AxisBox2D } from "../../../types/geometry.js"; 17 | 18 | /** 19 | * Returns a boolean stating whether or not we converted the projection 20 | * to relative projection. 21 | */ 22 | function convertToRelativeProjection(visualElement: VisualElement, isLayoutDrag?: boolean) { 23 | if (isLayoutDrag === void 0) { isLayoutDrag = true; } 24 | var projectionParent = visualElement.getProjectionParent(); 25 | if (!projectionParent) 26 | return false; 27 | var offset: AxisBox2D; 28 | if (isLayoutDrag) { 29 | offset = calcRelativeOffset(projectionParent.projection.target, visualElement.projection.target); 30 | removeBoxTransforms(offset, projectionParent.getLatestValues()); 31 | } 32 | else { 33 | offset = calcRelativeOffset(projectionParent.getLayoutState().layout, visualElement.getLayoutState().layout); 34 | } 35 | eachAxis(function (axis) { 36 | return visualElement.setProjectionTargetAxis(axis, offset[axis].min, offset[axis].max, true); 37 | }); 38 | return true; 39 | } 40 | 41 | export { convertToRelativeProjection }; 42 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/projection/measure.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { TransformPoint2D, AxisBox2D } from "../../../types/geometry"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { convertBoundingBoxToAxisBox, transformBoundingBox } from '../../../utils/geometry/index.js'; 13 | 14 | /** 15 | * Measure and return the element bounding box. 16 | * 17 | * We convert the box into an AxisBox2D to make it easier to work with each axis 18 | * individually and programmatically. 19 | * 20 | * This function optionally accepts a transformPagePoint function which allows us to compensate 21 | * for, for instance, measuring the element within a scaled plane like a Framer devivce preview component. 22 | */ 23 | function getBoundingBox(element: Element, transformPagePoint?: TransformPoint2D) { 24 | var box = element.getBoundingClientRect(); 25 | return convertBoundingBoxToAxisBox(transformBoundingBox(box, transformPagePoint)); 26 | } 27 | 28 | export { getBoundingBox }; 29 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/projection/relative-set.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from "../../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.1.11, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { calcRelativeOffset } from '../../../motion/features/layout/utils.js'; 13 | import { eachAxis } from '../../../utils/each-axis.js'; 14 | 15 | function setCurrentViewportBox(visualElement: VisualElement) { 16 | var projectionParent = visualElement.getProjectionParent(); 17 | if (!projectionParent) { 18 | visualElement.rebaseProjectionTarget(); 19 | return; 20 | } 21 | var relativeOffset = calcRelativeOffset(projectionParent.getLayoutState().layout, visualElement.getLayoutState().layout); 22 | eachAxis(function (axis) { 23 | visualElement.setProjectionTargetAxis(axis, relativeOffset[axis].min, relativeOffset[axis].max, true); 24 | }); 25 | } 26 | 27 | export { setCurrentViewportBox }; 28 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/projection/scale-correction.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ScaleCorrectionDefinitionMap } from './types'; 6 | import { defaultScaleCorrectors } from './default-scale-correctors'; 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | var valueScaleCorrection: ScaleCorrectionDefinitionMap = defaultScaleCorrectors; 13 | /** 14 | * @internal 15 | */ 16 | function addScaleCorrection(correctors: ScaleCorrectionDefinitionMap) { 17 | for (var key in correctors) { 18 | valueScaleCorrection[key] = correctors[key]; 19 | } 20 | } 21 | 22 | export { addScaleCorrection, valueScaleCorrection }; 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/projection/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { LayoutState, TargetProjection } from "../../utils/state"; 6 | export type ScaleCorrection = (latest: string | number, layoutState: LayoutState, projection: TargetProjection) => string | number; 7 | export interface ScaleCorrectionDefinition { 8 | process: ScaleCorrection; 9 | applyTo?: string[]; 10 | } 11 | export type ScaleCorrectionDefinitionMap = { 12 | [key: string]: ScaleCorrectionDefinition; 13 | }; 14 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { TransformPoint2D } from "../../types/geometry"; 6 | import type { HTMLMotionComponents } from "../html/types"; 7 | import type { SVGMotionComponents } from "../svg/types"; 8 | export interface DOMVisualElementOptions { 9 | /** 10 | * A function that can map a page point between spaces. Used by Framer 11 | * to support dragging and layout animations within scaled space. 12 | * 13 | * @public 14 | */ 15 | transformPagePoint?: TransformPoint2D; 16 | /** 17 | * Allow `transform` to be set as `"none"` if all transforms are their default 18 | * values. Switching to this removes the element as a GPU layer which can lead to subtle 19 | * graphical shifts. 20 | * 21 | * @public 22 | */ 23 | allowTransformNone?: boolean; 24 | /** 25 | * Allow this element to be GPU-accelerated. We currently enable this by 26 | * adding a `translateZ(0)`. 27 | * 28 | * @public 29 | */ 30 | enableHardwareAcceleration?: boolean; 31 | } 32 | export type DOMMotionComponents = HTMLMotionComponents & SVGMotionComponents; 33 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/use-render.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { RenderComponent } from '../../motion/features/types'; 6 | import type { HTMLRenderState } from '../html/types'; 7 | import type { SVGRenderState } from '../svg/types'; 8 | import UseRender from './UseRender.svelte'; 9 | 10 | export function createUseRender(forwardMotionProps?: boolean) {// @ts-expect-error 11 | return UseRender({ props: { forwardMotionProps } }) satisfies 12 | | RenderComponent 13 | | RenderComponent; 14 | } 15 | 16 | export { default as UseRender } from './UseRender.svelte'; 17 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/UseInitialMotionProps.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/camel-to-dash.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g; 12 | var REPLACE_TEMPLATE = "$1-$2"; 13 | /** 14 | * Convert camelCase to dash-case properties. 15 | */ 16 | var camelToDash = function (str: string) { 17 | return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase(); 18 | }; 19 | 20 | export { camelToDash }; 21 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/create-config.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionComponentConfig } from '../../../motion'; 6 | import type { FeatureComponents } from '../../../motion/features/types'; 7 | import type { HTMLRenderState } from '../../html/types'; 8 | import type { SVGRenderState } from '../../svg/types'; 9 | import type { CreateVisualElement } from '../../types'; 10 | import type { CustomMotionComponentConfig } from '../motion-proxy'; 11 | import type { Component } from 'svelte'; 12 | 13 | /** 14 | based on framer-motion@4.0.3, 15 | Copyright (c) 2018 Framer B.V. 16 | */ 17 | import { htmlMotionConfig } from '../../html/config-motion.js'; 18 | import { svgMotionConfig } from '../../svg/config-motion.js'; 19 | import { createUseRender } from '../use-render.js'; 20 | import { isSVGComponent } from './is-svg-component.js'; 21 | 22 | function createDomMotionConfig( 23 | Component: string | Component, 24 | { forwardMotionProps }: CustomMotionComponentConfig, 25 | preloadedFeatures?: FeatureComponents, 26 | createVisualElement?: CreateVisualElement 27 | ) { 28 | var baseConfig = isSVGComponent(Component) ? svgMotionConfig : htmlMotionConfig; 29 | 30 | return Object.assign(Object.assign({}, baseConfig), { 31 | preloadedFeatures, 32 | useRender: createUseRender(forwardMotionProps), 33 | createVisualElement, 34 | Component, 35 | }) as any satisfies 36 | | MotionComponentConfig 37 | | MotionComponentConfig; 38 | } 39 | 40 | export { createDomMotionConfig }; 41 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/is-css-variable.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | /** 12 | * Returns true if the provided key is a CSS variable 13 | */ 14 | function isCSSVariable(key: string) { 15 | return key.startsWith("--"); 16 | } 17 | 18 | export { isCSSVariable }; 19 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/is-svg-component.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | import { lowercaseSVGElements } from '../../svg/lowercase-elements.js'; 11 | import type { Component } from 'svelte'; 12 | 13 | function isSVGComponent(Component: string | Component) { 14 | if ( 15 | /** 16 | * If it's not a string, it's a custom React component. Currently we only support 17 | * HTML custom React components. 18 | */ 19 | typeof Component !== 'string' || 20 | /** 21 | * If it contains a dash, the element is a custom HTML webcomponent. 22 | */ 23 | Component.includes('-') 24 | ) { 25 | return false; 26 | } 27 | if ( 28 | /** 29 | * If it's in our list of lowercase SVG tags, it's an SVG component 30 | */ 31 | lowercaseSVGElements.indexOf(Component) > -1 || 32 | /** 33 | * If it contains a capital letter, it's an SVG component 34 | */ 35 | /[A-Z]/.test(Component) 36 | ) { 37 | return true; 38 | } 39 | return false; 40 | } 41 | 42 | export { isSVGComponent }; 43 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/parse-dom-variant.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MakeTargetAnimatable } from "../../utils/animation"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { resolveCSSVariables } from './css-variables-conversion.js'; 13 | import { unitConversion } from './unit-conversion.js'; 14 | 15 | /** 16 | * Parse a DOM variant to make it animatable. This involves resolving CSS variables 17 | * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels. 18 | */ 19 | var parseDomVariant: MakeTargetAnimatable = function (visualElement, target, origin, transitionEnd) { 20 | var resolved = resolveCSSVariables(visualElement, target, transitionEnd); 21 | target = resolved.target; 22 | transitionEnd = resolved.transitionEnd; 23 | return unitConversion(visualElement, target, origin, transitionEnd); 24 | }; 25 | 26 | export { parseDomVariant }; 27 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/use-html-props.ts: -------------------------------------------------------------------------------- 1 | export {default as UseStyle} from '../../html/UseStyle.svelte'; 2 | // export { default as UseHTMLProps} from "./UseHTMLProps.svelte"; 3 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/utils/use-svg-props.ts: -------------------------------------------------------------------------------- 1 | export {default as UseSVGProps} from '../../svg/UseSVGProps.svelte'; 2 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/animatable-none.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import {fixed} from '../../../utils/fix-process-env.js'; 12 | import { filter, complex } from 'style-value-types'; 13 | import { getDefaultValueType } from './defaults.js'; 14 | 15 | function getAnimatableNone(key:string, value:string) { 16 | var _a; 17 | var defaultValueType = getDefaultValueType(key); 18 | if (defaultValueType !== filter) 19 | defaultValueType = complex; 20 | // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target 21 | return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value); 22 | } 23 | 24 | export { getAnimatableNone }; 25 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/defaults.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ValueTypeMap } from './types'; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import { fixed } from '../../../utils/fix-process-env.js'; 12 | import { color, filter } from 'style-value-types'; 13 | import { numberValueTypes } from './number.js'; 14 | 15 | /** 16 | * A map of default value types for common values 17 | */ 18 | var defaultValueTypes = Object.assign(Object.assign({}, numberValueTypes), { 19 | // Color props 20 | color: color, 21 | backgroundColor: color, 22 | outlineColor: color, 23 | fill: color, 24 | stroke: color, 25 | // Border props 26 | borderColor: color, 27 | borderTopColor: color, 28 | borderRightColor: color, 29 | borderBottomColor: color, 30 | borderLeftColor: color, 31 | filter: filter, 32 | WebkitFilter: filter, 33 | }) as ValueTypeMap; 34 | /** 35 | * Gets the default ValueType for the provided value key 36 | */ 37 | var getDefaultValueType = (key: string) => defaultValueTypes[key]; 38 | 39 | export { defaultValueTypes, getDefaultValueType }; 40 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/dimensions.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import {fixed} from '../../../utils/fix-process-env.js'; 12 | import { number, px, percent, degrees, vw, vh } from 'style-value-types'; 13 | import { testValueType } from './test.js'; 14 | import { auto } from './type-auto.js'; 15 | import type { CustomValueType } from '../../../types.js'; 16 | 17 | /** 18 | * A list of value types commonly used for dimensions 19 | */ 20 | var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto]; 21 | /** 22 | * Tests a dimensional value against the list of dimension ValueTypes 23 | */ 24 | var findDimensionValueType = function (v: string | number | CustomValueType | null) { 25 | return dimensionValueTypes.find(testValueType(v)); 26 | }; 27 | 28 | export { dimensionValueTypes, findDimensionValueType }; 29 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/find.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | import { fixed } from '../../../utils/fix-process-env.js'; 11 | import { color, complex } from 'style-value-types'; 12 | import { dimensionValueTypes } from './dimensions.js'; 13 | import { testValueType } from './test.js'; 14 | 15 | /** 16 | * A list of all ValueTypes 17 | */ 18 | var valueTypes = [...dimensionValueTypes, ...[color, complex]]; 19 | /** 20 | * Tests a value against the list of ValueTypes 21 | */ 22 | var findValueType = (v: any) => 23 | valueTypes.find(testValueType(v)) as 24 | | import('style-value-types').ValueType 25 | | { 26 | test: (v: any) => boolean; 27 | parse: (v: string) => (number | import('style-value-types').RGBA | import('style-value-types').HSLA)[]; 28 | createTransformer: (v: string) => (v: (string | number | import('style-value-types').Color)[]) => string; 29 | getAnimatableNone: (v: string) => string; 30 | } 31 | | undefined; 32 | 33 | export { findValueType }; 34 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/get-as-type.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ValueType } from "style-value-types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | /** 13 | * Provided a value and a ValueType, returns the value as that value type. 14 | */ 15 | var getValueAsType = function (value: any, type?: ValueType | undefined) { 16 | return type && typeof value === "number" //@ts-ignore 17 | ? type.transform(value) 18 | : value; 19 | }; 20 | 21 | export { getValueAsType }; 22 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ValueType } from "style-value-types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | /** 13 | * Tests a provided value against a ValueType 14 | */ 15 | var testValueType = function (v: any) { return function (type: ValueType) { return type.test(v); }; }; 16 | 17 | export { testValueType }; 18 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/type-auto.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ValueType } from "style-value-types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | 13 | /** 14 | * ValueType for "auto" 15 | */ 16 | var auto = { 17 | test: function (v) { return v === "auto"; }, 18 | parse: function (v) { return v; }, 19 | } as ValueType; 20 | 21 | export { auto }; 22 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/type-int.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | import { fixed } from '../../../utils/fix-process-env'; 11 | import { number } from 'style-value-types'; 12 | 13 | var int = Object.assign(Object.assign({}, number), { transform: Math.round }) as { 14 | transform: (x: number) => number; 15 | test: (v: any) => boolean; 16 | parse: (v: any) => any; 17 | createTransformer?: ((template: string) => import('style-value-types').Transformer) | undefined; 18 | default?: any; 19 | getAnimatableNone?: ((v: any) => any) | undefined; 20 | }; 21 | 22 | export { int }; 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/dom/value-types/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ValueType } from "style-value-types"; 6 | export interface ValueTypeMap { 7 | [key: string]: ValueType; 8 | } -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/UseHTMLProps.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/UseInitialMotionValues.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 27 | 28 | {@render children(styles)} 29 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/UseStyle.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 7 | 8 | 29 | 30 | 31 | {#snippet children(s1: any)} 32 | 33 | {/snippet} 34 | 35 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/config-motion.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionComponentConfig } from "../../motion"; 6 | import type { HTMLRenderState } from "./types"; 7 | // export declare const htmlMotionConfig: ; 8 | 9 | 10 | /** 11 | based on framer-motion@4.0.3, 12 | Copyright (c) 2018 Framer B.V. 13 | */ 14 | import { createHtmlRenderState } from './utils/create-render-state.js'; 15 | import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.js'; 16 | 17 | var htmlMotionConfig = { 18 | //@ts-ignore 19 | scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, 20 | createRenderState: createHtmlRenderState, 21 | } satisfies Partial>; 22 | 23 | export { htmlMotionConfig }; 24 | 25 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/supported-elements.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | type UnionStringArray> = T[number]; 6 | /** 7 | * @internal 8 | */ 9 | export const htmlElements = ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "webview"] as const; 10 | export type HTMLElements = UnionStringArray; -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/use-props.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import { isForcedMotionValue } from '../../motion/utils/is-forced-motion-value.js'; 6 | import type { MotionValue } from '../../value/index.js'; 7 | import { isMotionValue } from '../../value/utils/is-motion-value.js'; 8 | import type { MotionProps } from '../../motion/types'; 9 | import type { ResolvedValues } from '../types'; 10 | 11 | export type UseStyle = (props: MotionProps, visualState: ResolvedValues, isStatic: boolean) => ResolvedValues; 12 | export type UseHTMLProps = (props: MotionProps, visualState: ResolvedValues, isStatic: boolean) => any; 13 | 14 | import { default as UseHTMLPropsComp } from './UseHTMLProps.svelte'; 15 | import { default as UseStyleComp } from './UseStyle.svelte'; 16 | 17 | export const UseHTMLProps = UseHTMLPropsComp as typeof UseHTMLPropsComp; 18 | export const UseStyle = UseStyleComp as typeof UseStyleComp; 19 | 20 | export function copyRawValuesOnly( 21 | target: ResolvedValues, 22 | source: { 23 | [key: string]: string | number | MotionValue; 24 | }, 25 | props: MotionProps 26 | ) { 27 | for (const key in source) { 28 | if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) { 29 | target[key] = source[key]; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/utils/create-render-state.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | var createHtmlRenderState = function () { return ({ 11 | style: {}, 12 | transform: {}, 13 | transformKeys: [], 14 | transformOrigin: {}, 15 | vars: {}, 16 | }); }; 17 | 18 | export { createHtmlRenderState }; 19 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/utils/render.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { HTMLRenderState } from "../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | function renderHTML (element: HTMLElement, { style, vars }: HTMLRenderState) { 13 | // Directly assign style into the Element's style prop. In tests Object.assign is the 14 | // fastest way to assign styles. 15 | Object.assign(element.style, style); 16 | // Loop over any CSS variables and assign those. 17 | for (var key in vars) { 18 | //@ts-ignore 19 | element.style.setProperty(key, vars[key]); 20 | } 21 | } 22 | 23 | export { renderHTML }; 24 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/utils/scrape-motion-values.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionProps, MotionStyle } from "../../../motion/types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { isForcedMotionValue } from '../../../motion/utils/is-forced-motion-value.js'; 13 | import { isMotionValue } from '../../../value/utils/is-motion-value.js'; 14 | 15 | function scrapeMotionValuesFromProps(props: MotionProps) { 16 | var style = props.style as MotionStyle; 17 | var newValues = {}; 18 | for (var key in style) { 19 | //@ts-ignore 20 | if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) { 21 | //@ts-ignore 22 | newValues[key] = style[key]; 23 | } 24 | } 25 | return newValues; 26 | } 27 | 28 | export { scrapeMotionValuesFromProps }; 29 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/html/utils/transform.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | 11 | /** 12 | * A list of all transformable axes. We'll use this list to generated a version 13 | * of each axes for each transform. 14 | */ 15 | var transformAxes = ["", "X", "Y", "Z"]; 16 | /** 17 | * An ordered array of each transformable value. By default, transform values 18 | * will be sorted to this order. 19 | */ 20 | var order = ["translate", "scale", "rotate", "skew"]; 21 | /** 22 | * Generate a list of every possible transform key. 23 | */ 24 | var transformProps = ["transformPerspective", "x", "y", "z"]; 25 | order.forEach(function (operationKey) { 26 | return transformAxes.forEach(function (axesKey) { 27 | return transformProps.push(operationKey + axesKey); 28 | }); 29 | }); 30 | /** 31 | * A function to use with Array.sort to sort transform keys by their default order. 32 | */ 33 | function sortTransformProps(a: string, b: string) { 34 | return transformProps.indexOf(a) - transformProps.indexOf(b); 35 | } 36 | /** 37 | * A quick lookup for transform props. 38 | */ 39 | var transformPropSet = new Set(transformProps); 40 | function isTransformProp(key: string) { 41 | return transformPropSet.has(key); 42 | } 43 | /** 44 | * A quick lookup for transform origin props 45 | */ 46 | var transformOriginProps = new Set(["originX", "originY", "originZ"]); 47 | function isTransformOriginProp(key: string) { 48 | return transformOriginProps.has(key); 49 | } 50 | 51 | export { isTransformOriginProp, isTransformProp, sortTransformProps, transformAxes, transformProps }; 52 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/UseSVGProps.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 37 | 38 | {@render children?.(visualProps)} 39 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/lowercase-elements.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.0.3, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | /** 6 | * We keep these listed seperately as we use the lowercase tag names as part 7 | * of the runtime bundle to detect SVG components 8 | */ 9 | export const lowercaseSVGElements = [ 10 | "animate", 11 | "circle", 12 | "defs", 13 | "desc", 14 | "ellipse", 15 | "g", 16 | "image", 17 | "line", 18 | "filter", 19 | "marker", 20 | "mask", 21 | "metadata", 22 | "path", 23 | "pattern", 24 | "polygon", 25 | "polyline", 26 | "rect", 27 | "stop", 28 | "svg", 29 | "switch", 30 | "symbol", 31 | "text", 32 | "tspan", 33 | "use", 34 | "view", 35 | ]; 36 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/supported-elements.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | type UnionStringArray> = T[number]; 6 | /** 7 | * @internal 8 | */ 9 | export const svgElements = ["animate", "circle", "defs", "desc", "ellipse", "g", "image", "line", "filter", "marker", "mask", "metadata", "path", "pattern", "polygon", "polyline", "rect", "stop", "svg", "switch", "symbol", "text", "tspan", "use", "view", "clipPath", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "foreignObject", "linearGradient", "radialGradient", "textPath"] as const; 10 | export type SVGElements = UnionStringArray; -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { SvelteHTMLElements } from 'svelte/elements'; 6 | import type { MotionProps } from '../../motion/types'; 7 | import type { ForwardRefComponent, HTMLRenderState } from '../html/types'; 8 | import type { ResolvedValues } from '../types'; 9 | import type { SVGElements } from './supported-elements'; 10 | export interface SVGRenderState extends HTMLRenderState { 11 | /** 12 | * Measured dimensions of the SVG element to be used to calculate a transform-origin. 13 | */ 14 | dimensions?: SVGDimensions; 15 | /** 16 | * A mutable record of attributes we want to apply directly to the rendered Element 17 | * every frame. We use a mutable data structure to reduce GC during animations. 18 | */ 19 | attrs: ResolvedValues; 20 | /** 21 | * Measured path length if this is a SVGPathElement 22 | */ 23 | totalPathLength?: number; 24 | } 25 | export type SVGDimensions = { 26 | x: number; 27 | y: number; 28 | width: number; 29 | height: number; 30 | }; 31 | 32 | /** 33 | * Motion-optimised versions of React's SVG components. 34 | * 35 | * @public 36 | */ 37 | export type SVGMotionComponents = { 38 | [K in SVGElements]: ForwardRefComponent; 39 | }; 40 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/use-props.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionProps } from "../../motion/types"; 6 | import type { ResolvedValues } from "../types"; 7 | export type useSVGProps = (props: MotionProps, visualState: ResolvedValues) => { 8 | style: { 9 | [x: string]: string | number; 10 | }; 11 | }; 12 | 13 | export { default as UseSVGProps } from './UseSVGProps.svelte'; 14 | 15 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/utils/camel-case-attrs.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.0.3, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | /** 6 | * A set of attribute names that are always read/written as camel case. 7 | */ 8 | export const camelCaseAttributes = new Set([ 9 | "baseFrequency", 10 | "diffuseConstant", 11 | "kernelMatrix", 12 | "kernelUnitLength", 13 | "keySplines", 14 | "keyTimes", 15 | "limitingConeAngle", 16 | "markerHeight", 17 | "markerWidth", 18 | "numOctaves", 19 | "targetX", 20 | "targetY", 21 | "surfaceScale", 22 | "specularConstant", 23 | "specularExponent", 24 | "stdDeviation", 25 | "tableValues", 26 | "viewBox", 27 | ]); 28 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/utils/create-render-state.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { SVGRenderState } from '../types'; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import { createHtmlRenderState } from '../../html/utils/create-render-state.js'; 12 | 13 | var createSvgRenderState = () => 14 | Object.assign(Object.assign({}, createHtmlRenderState()), { attrs: {} }) satisfies SVGRenderState; 15 | 16 | export { createSvgRenderState }; 17 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/utils/path.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ResolvedValues } from "../../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import {fixed} from '../../../utils/fix-process-env'; 13 | import { px } from 'style-value-types'; 14 | 15 | // Convert a progress 0-1 to a pixels value based on the provided length 16 | var progressToPixels = function (progress: number, length: number) { 17 | return px.transform?.(progress * length); 18 | }; 19 | var dashKeys = { 20 | offset: "stroke-dashoffset", 21 | array: "stroke-dasharray", 22 | }; 23 | var camelKeys = { 24 | offset: "strokeDashoffset", 25 | array: "strokeDasharray", 26 | }; 27 | /** 28 | * Build SVG path properties. Uses the path's measured length to convert 29 | * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset 30 | * and stroke-dasharray attributes. 31 | * 32 | * This function is mutative to reduce per-frame GC. 33 | */ 34 | function buildSVGPath(attrs: ResolvedValues, totalLength: number, length: number, spacing?: number, offset?: number, useDashCase?: boolean) { 35 | if (spacing === void 0) { spacing = 1; } 36 | if (offset === void 0) { offset = 0; } 37 | if (useDashCase === void 0) { useDashCase = true; } 38 | // We use dash case when setting attributes directly to the DOM node and camel case 39 | // when defining props on a React component. 40 | var keys = useDashCase ? dashKeys : camelKeys; 41 | // Build the dash offset 42 | attrs[keys.offset] = progressToPixels(-offset, totalLength); 43 | // Build the dash array 44 | var pathLength = progressToPixels(length, totalLength); 45 | var pathSpacing = progressToPixels(spacing, totalLength); 46 | attrs[keys.array] = pathLength + " " + pathSpacing; 47 | } 48 | 49 | export { buildSVGPath }; 50 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/utils/render.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { SVGRenderState } from "../types"; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import { camelToDash } from '../../dom/utils/camel-to-dash.js'; 12 | import { renderHTML } from '../../html/utils/render.js'; 13 | import { camelCaseAttributes } from './camel-case-attrs.js'; 14 | 15 | function renderSVG(element: HTMLElement, renderState: SVGRenderState) { 16 | renderHTML(element, renderState); 17 | for (var key in renderState.attrs) { 18 | element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key] as string); 19 | } 20 | } 21 | 22 | export { renderSVG }; 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/utils/scrape-motion-values.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionProps } from "../../../motion/types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { isMotionValue } from '../../../value/utils/is-motion-value.js'; 13 | import { scrapeMotionValuesFromProps as scrapeMotionValuesFromProps$1 } from '../../html/utils/scrape-motion-values.js'; 14 | 15 | function scrapeMotionValuesFromProps(props: MotionProps) { 16 | var newValues = scrapeMotionValuesFromProps$1(props); 17 | for (var key in props) { 18 | //@ts-ignore 19 | if (isMotionValue(props[key])) { 20 | var targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key; 21 | //@ts-ignore 22 | newValues[targetKey] = props[key]; 23 | } 24 | } 25 | return newValues; 26 | } 27 | 28 | export { scrapeMotionValuesFromProps }; 29 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/svg/utils/transform-origin.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { SVGDimensions } from "../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import {fixed} from '../../../utils/fix-process-env'; 13 | import { px } from 'style-value-types'; 14 | 15 | function calcOrigin(origin: number, offset: number, size: number) { 16 | return typeof origin === "string" 17 | ? origin 18 | : px.transform?.(offset + size * origin); 19 | } 20 | /** 21 | * The SVG transform origin defaults are different to CSS and is less intuitive, 22 | * so we use the measured dimensions of the SVG to reconcile these. 23 | */ 24 | function calcSVGTransformOrigin(dimensions: SVGDimensions, originX: number | string, originY: number | string) { 25 | var pxOriginX = calcOrigin(originX as number, dimensions.x, dimensions.width); 26 | var pxOriginY = calcOrigin(originY as number, dimensions.y, dimensions.height); 27 | return pxOriginX + " " + pxOriginY; 28 | } 29 | 30 | export { calcSVGTransformOrigin }; 31 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/utils/compare-by-depth.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from "../types"; 6 | export interface WithDepth { 7 | depth: number; 8 | } 9 | 10 | /** 11 | based on framer-motion@4.0.3, 12 | Copyright (c) 2018 Framer B.V. 13 | */ 14 | var compareByDepth = function (a: VisualElement, b: VisualElement) { 15 | return a.depth - b.depth; 16 | }; 17 | 18 | export { compareByDepth }; 19 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/utils/flat-tree.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { WithDepth } from './compare-by-depth'; 6 | 7 | class FlatTree { 8 | private children: any[] = []; 9 | private isDirty = false; 10 | add = (child: WithDepth) => { 11 | addUniqueItem(this.children, child); 12 | this.isDirty = true; 13 | }; 14 | remove = (child: WithDepth) => { 15 | removeItem(this.children, child); 16 | this.isDirty = true; 17 | }; 18 | forEach = (callback: (child: WithDepth) => void) => { 19 | this.isDirty && this.children.sort(compareByDepth); 20 | var numChildren = this.children.length; 21 | for (var i = 0; i < numChildren; i++) { 22 | callback(this.children[i]); 23 | } 24 | }; 25 | } 26 | 27 | /** 28 | based on framer-motion@4.0.3, 29 | Copyright (c) 2018 Framer B.V. 30 | */ 31 | import { addUniqueItem, removeItem } from '../../utils/array.js'; 32 | import { compareByDepth } from './compare-by-depth.js'; 33 | 34 | export { FlatTree }; 35 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/utils/is-draggable.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { VisualElement } from "../types"; 6 | 7 | 8 | /** 9 | based on framer-motion@4.1.11, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | function isDraggable(visualElement: VisualElement) { 13 | var _a = visualElement.getProps(), drag = _a.drag, _dragX = _a._dragX; 14 | return drag && !_dragX; 15 | } 16 | 17 | export { isDraggable }; 18 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/utils/projection.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ResolvedValues, VisualElement } from "../types"; 6 | import type { LayoutState, TargetProjection } from "./state"; 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { resetBox, applyTreeDeltas } from '../../utils/geometry/delta-apply.js'; 13 | import { updateBoxDelta } from '../../utils/geometry/delta-calc.js'; 14 | 15 | function updateLayoutDeltas({ delta, layout, layoutCorrected, treeScale }: LayoutState, { target }: TargetProjection, treePath: VisualElement[], transformOrigin: ResolvedValues) { 16 | /** 17 | * Reset the corrected box with the latest values from box, as we're then going 18 | * to perform mutative operations on it. 19 | */ 20 | resetBox(layoutCorrected, layout); 21 | /** 22 | * Apply all the parent deltas to this box to produce the corrected box. This 23 | * is the layout box, as it will appear on screen as a result of the transforms of its parents. 24 | */ 25 | applyTreeDeltas(layoutCorrected, treeScale, treePath); 26 | /** 27 | * Update the delta between the corrected box and the target box before user-set transforms were applied. 28 | * This will allow us to calculate the corrected borderRadius and boxShadow to compensate 29 | * for our layout reprojection, but still allow them to be scaled correctly by the user. 30 | * It might be that to simplify this we may want to accept that user-set scale1 is also corrected 31 | * and we wouldn't have to keep and calc both deltas, OR we could support a user setting 32 | * to allow people to choose whether these styles are corrected based on just the 33 | * layout reprojection or the final bounding box. 34 | */ 35 | updateBoxDelta(delta, layoutCorrected, target, transformOrigin); 36 | } 37 | 38 | export { updateLayoutDeltas }; 39 | -------------------------------------------------------------------------------- /src/lib/motion-start/render/utils/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | export enum AnimationType { 6 | Animate = "animate", 7 | Hover = "whileHover", 8 | Tap = "whileTap", 9 | Drag = "whileDrag", 10 | Focus = "whileFocus", 11 | Exit = "exit" 12 | } 13 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/UseUnmountEffect.svelte: -------------------------------------------------------------------------------- 1 | 3 | 4 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/array.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | function addUniqueItem(arr: T[], item: T) { 11 | arr.indexOf(item) === -1 && arr.push(item); 12 | } 13 | function removeItem(arr: T[], item: T) { 14 | var index = arr.indexOf(item); 15 | index > -1 && arr.splice(index, 1); 16 | } 17 | 18 | export { addUniqueItem, removeItem }; 19 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/each-axis.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | // Call a handler once for each axis 11 | function eachAxis(handler: (axis: "x" | "y") => T): T[] { 12 | return [handler("x"), handler("y")]; 13 | } 14 | 15 | export { eachAxis }; 16 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/errors.ts: -------------------------------------------------------------------------------- 1 | import { noop } from "./noop" 2 | 3 | export type DevMessage = (check: boolean, message: string) => void 4 | 5 | let warning: DevMessage = noop 6 | let invariant: DevMessage = noop 7 | 8 | if (process.env.NODE_ENV !== "production") { 9 | warning = (check, message) => { 10 | if (!check && typeof console !== "undefined") { 11 | console.warn(message) 12 | } 13 | } 14 | 15 | invariant = (check, message) => { 16 | if (!check) { 17 | throw new Error(message) 18 | } 19 | } 20 | } 21 | 22 | export { invariant, warning } 23 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/fix-process-env.ts: -------------------------------------------------------------------------------- 1 | 2 | const fix = ()=>{ 3 | try{ 4 | 5 | if (!process.env){ 6 | process.env={}; 7 | } 8 | return true;; 9 | }catch(e){} 10 | 11 | if (!window || (window.process && window.process.env)){ 12 | return false; 13 | } 14 | 15 | if (!window.process){ 16 | window.process = {} 17 | } 18 | window.process.env={}; 19 | return true; 20 | } 21 | 22 | export const fixed = fix(); -------------------------------------------------------------------------------- /src/lib/motion-start/utils/is-browser.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | var isBrowser = typeof window !== "undefined"; 11 | 12 | export { isBrowser }; 13 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/is-numerical-string.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | /** 11 | * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1" 12 | */ 13 | var isNumericalString = function (v: string) { return /^\-?\d*\.?\d+$/.test(v); }; 14 | 15 | export { isNumericalString }; 16 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/is-ref-object.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | function isRefObject(ref: any): ref is { current: E } { 11 | return typeof ref === 'object' && Object.prototype.hasOwnProperty.call(ref, 'current'); 12 | } 13 | 14 | export { isRefObject }; 15 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/noop.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | // export declare function noop(any: T): T; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | function noop(any: T) { 12 | return any; 13 | } 14 | 15 | export { noop }; 16 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/resolve-value.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { CustomValueType, ValueTarget, SingleTarget } from "../types"; 6 | // export declare const isCustomValue: (v: any) => v is CustomValueType; 7 | // export declare const resolveFinalValueInKeyframes: (v: ValueTarget) => SingleTarget; 8 | 9 | /** 10 | based on framer-motion@4.0.3, 11 | Copyright (c) 2018 Framer B.V. 12 | */ 13 | import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.js'; 14 | 15 | var isCustomValue = function (v: any): v is CustomValueType { 16 | return Boolean(v && typeof v === "object" && v.mix && v.toValue); 17 | }; 18 | var resolveFinalValueInKeyframes = function (v: ValueTarget): SingleTarget { 19 | // TODO maybe throw if v.length - 1 is placeholder token? 20 | return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v; 21 | }; 22 | 23 | export { isCustomValue, resolveFinalValueInKeyframes }; 24 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/shallow-compare.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | function shallowCompare(next: any[], prev: any[] | null) { 11 | if (!Array.isArray(prev)) 12 | return false; 13 | var prevLength = prev.length; 14 | if (prevLength !== next.length) 15 | return false; 16 | for (var i = 0; i < prevLength; i++) { 17 | if (prev[i] !== next[i]) 18 | return false; 19 | } 20 | return true; 21 | } 22 | 23 | export { shallowCompare }; 24 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/subscription-manager.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | type GenericHandler = (...args: any) => void; 6 | class SubscriptionManager { 7 | private subscriptions: ((a?: any, b?: any, c?: any) => void)[] = []; 8 | add = (handler: Handler) => { 9 | addUniqueItem(this.subscriptions, handler); 10 | return () => { 11 | return removeItem(this.subscriptions, handler); 12 | }; 13 | }; 14 | notify = (...[a, b, c]: Parameters) => { 15 | var numSubscriptions = this.subscriptions.length; 16 | if (!numSubscriptions) return; 17 | if (numSubscriptions === 1) { 18 | /** 19 | * If there's only a single handler we can just call it without invoking a loop. 20 | */ 21 | this.subscriptions[0](a, b, c); 22 | } else { 23 | for (var i = 0; i < numSubscriptions; i++) { 24 | /** 25 | * Check whether the handler exists before firing as it's possible 26 | * the subscriptions were modified during this loop running. 27 | */ 28 | var handler = this.subscriptions[i]; 29 | handler && handler(a, b, c); 30 | } 31 | } 32 | }; 33 | getSize = () => { 34 | return this.subscriptions.length; 35 | }; 36 | clear = () => { 37 | this.subscriptions.length = 0; 38 | }; 39 | } 40 | 41 | /** 42 | based on framer-motion@4.0.3, 43 | Copyright (c) 2018 Framer B.V. 44 | */ 45 | import { addUniqueItem, removeItem } from './array.js'; 46 | 47 | export { SubscriptionManager }; 48 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/time-conversion.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | 6 | /** 7 | based on framer-motion@4.0.3, 8 | Copyright (c) 2018 Framer B.V. 9 | */ 10 | /** 11 | * Converts seconds to milliseconds 12 | * 13 | * @param seconds - Time in seconds. 14 | * @return milliseconds - Converted time in milliseconds. 15 | */ 16 | var secondsToMilliseconds = function (seconds: number) { return seconds * 1000; }; 17 | 18 | export { secondsToMilliseconds }; 19 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/use-force-update.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | export type useForceUpdate = () => void; 6 | 7 | // export {default as UseForceUpdate} from './UseForceUpdate.svelte' 8 | -------------------------------------------------------------------------------- /src/lib/motion-start/utils/use-unmount-effect.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | export type useUnmountEffect = (callback: () => void) => void; 6 | 7 | export { default as UseUnmountEffect } from './UseUnmountEffect.svelte'; 8 | 9 | -------------------------------------------------------------------------------- /src/lib/motion-start/value/scroll/use-element-scroll.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { ScrollMotionValues } from './utils'; 6 | 7 | /** 8 | based on framer-motion@4.1.16, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import { createScrollMotionValues, createScrollUpdater } from './utils'; 12 | import { addDomEvent } from '../../events/use-dom-event'; 13 | 14 | const getElementScrollOffsets = 15 | (element: { 16 | scrollLeft: any; 17 | scrollTop: any; 18 | scrollWidth: number; 19 | offsetWidth: number; 20 | scrollHeight: number; 21 | offsetHeight: number; 22 | }) => 23 | () => { 24 | return { 25 | xOffset: element.scrollLeft, 26 | yOffset: element.scrollTop, 27 | xMaxOffset: element.scrollWidth - element.offsetWidth, 28 | yMaxOffset: element.scrollHeight - element.offsetHeight, 29 | }; 30 | }; 31 | 32 | export const useElementScroll = (ref: { current: HTMLElement | null }) => { 33 | const values = {}; 34 | 35 | const setScroll = async () => { 36 | if (typeof window === 'undefined') return () => {}; 37 | 38 | let times = 10; 39 | while ((!ref || !ref.current) && !values.ref) { 40 | if (times-- < 1) { 41 | return () => {}; 42 | } 43 | 44 | await new Promise((r) => setTimeout(() => r(), 200)); 45 | } 46 | const element = ref && ref.current ? ref : values.ref; 47 | 48 | const updateScrollValues = createScrollUpdater(values, getElementScrollOffsets(element)); 49 | 50 | const scrollListener = addDomEvent(element, 'scroll', updateScrollValues, { passive: true }); 51 | 52 | const resizeListener = addDomEvent(element, 'resize', updateScrollValues); 53 | return () => { 54 | scrollListener && scrollListener(); 55 | resizeListener && resizeListener(); 56 | }; 57 | }; 58 | Object.assign(values, createScrollMotionValues(setScroll)); 59 | 60 | return values as ScrollMotionValues; 61 | }; 62 | 63 | //export { default as UseElementScroll } from './UseElementScroll.svelte'; 64 | -------------------------------------------------------------------------------- /src/lib/motion-start/value/use-combine-values.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionValue } from '.'; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | import sync from 'framesync'; 12 | import { motionValue } from '.'; 13 | 14 | export const useCombineMotionValues = (values: (MotionValue | (() => R))[], combineValues: () => R) => { 15 | let subscriptions: (() => void)[] = []; 16 | let vals = values; 17 | 18 | const unsubscribe = () => { 19 | for (const unsubscribe of subscriptions) { 20 | unsubscribe(); 21 | } 22 | }; 23 | const subscribe = () => { 24 | subscriptions = vals.map((val) => (val as MotionValue).onChange(handler)); 25 | updateValue(); 26 | }; 27 | const value = motionValue(combineValues(), () => { 28 | unsubscribe(); 29 | subscribe(); 30 | return unsubscribe; 31 | }) as MotionValue & { reset: (values: MotionValue[], combineValues: () => R) => void }; 32 | 33 | let updateValue = () => { 34 | value.set(combineValues()); 35 | }; 36 | 37 | const handler = () => { 38 | sync.update(updateValue, false, true); 39 | }; 40 | 41 | value.reset = (_values, _combineValues) => { 42 | vals = _values; 43 | //cleanup and reset 44 | unsubscribe(); 45 | updateValue = () => { 46 | value.set(_combineValues()); 47 | }; 48 | subscribe(); 49 | }; 50 | 51 | return value; 52 | }; 53 | // export { default as UseCombineMotionValues } from "./UseCombineValues.svelte"; 54 | -------------------------------------------------------------------------------- /src/lib/motion-start/value/use-motion-template.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import { MotionValue } from "."; 6 | 7 | import { useCombineMotionValues } from "./use-combine-values" 8 | 9 | /** 10 | * Combine multiple motion values into a new one using a string template literal. 11 | * 12 | * ```jsx 13 | * import { 14 | * motion, 15 | * useSpring, 16 | * useMotionValue, 17 | * useMotionTemplate 18 | * } from "framer-motion" 19 | * 20 | * function Component() { 21 | * const shadowX = useSpring(0) 22 | * const shadowY = useMotionValue(0) 23 | * const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))` 24 | * 25 | * return 26 | * } 27 | * ``` 28 | * 29 | * @public 30 | */ 31 | 32 | export const useMotionTemplate = (fragments: TemplateStringsArray, ...values: MotionValue[]) => { 33 | /** 34 | * Create a function that will build a string from the latest motion values. 35 | */ 36 | let numFragments = fragments.length; 37 | const buildValue = () => { 38 | let output = `` 39 | 40 | for (let i = 0; i < numFragments; i++) { 41 | output += fragments[i] 42 | const value = values[i] 43 | if (value) output += values[i].get() 44 | } 45 | 46 | return output 47 | } 48 | const value = useCombineMotionValues(values, buildValue) as any; 49 | value.resetInner = value.reset; 50 | 51 | value.reset = (f: TemplateStringsArray, ...vs: MotionValue[]) => { 52 | numFragments = f.length; 53 | value.resetInner(vs,buildValue) 54 | } 55 | 56 | return value as MotionValue & { reset: (fragments: TemplateStringsArray, ...values: MotionValue[]) => void }; 57 | } -------------------------------------------------------------------------------- /src/lib/motion-start/value/use-motion-value.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | /** 6 | * Creates a `MotionValue` to track the state and velocity of a value. 7 | * 8 | * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop. 9 | * 10 | * @motion 11 | * 12 | * ```jsx 13 | * 18 | *

19 | * 20 | * ``` 21 | * 22 | * @param initial - The initial state. 23 | * 24 | * @public 25 | */ 26 | export { motionValue as useMotionValue } from './index.js'; 27 | // export { default as UseMotionValue } from './UseMotionValue.svelte'; 28 | -------------------------------------------------------------------------------- /src/lib/motion-start/value/use-velocity.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionValue } from './index.js'; 6 | import { useMotionValue } from './use-motion-value.js'; 7 | /** 8 | * Creates a `MotionValue` that updates when the velocity of the provided `MotionValue` changes. 9 | * 10 | * ```javascript 11 | * const x = useMotionValue(0) 12 | * const xVelocity = useVelocity(x) 13 | * const xAcceleration = useVelocity(xVelocity) 14 | * ``` 15 | * 16 | * @public 17 | */ 18 | export const useVelocity = (value: MotionValue) => { 19 | let val = value; 20 | let cleanup: () => void; 21 | 22 | const reset = (value: MotionValue) => { 23 | cleanup?.(); 24 | val = value; 25 | cleanup = val.velocityUpdateSubscribers.add((newVelocity) => { 26 | velocity.set(newVelocity); 27 | }); 28 | }; 29 | 30 | const velocity = useMotionValue(value.getVelocity(), () => { 31 | cleanup?.(); 32 | cleanup = val.velocityUpdateSubscribers.add((newVelocity) => { 33 | velocity.set(newVelocity); 34 | }); 35 | return () => { 36 | cleanup?.(); 37 | }; 38 | }) as MotionValue & { reset: typeof reset }; 39 | 40 | velocity.reset = reset; 41 | 42 | return velocity; 43 | }; 44 | -------------------------------------------------------------------------------- /src/lib/motion-start/value/utils/is-motion-value.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import type { MotionValue } from ".."; 6 | 7 | /** 8 | based on framer-motion@4.0.3, 9 | Copyright (c) 2018 Framer B.V. 10 | */ 11 | var isMotionValue = function (value: any): value is MotionValue { 12 | return value !== null && typeof value === "object" && value.getVelocity; 13 | }; 14 | 15 | export { isMotionValue }; 16 | -------------------------------------------------------------------------------- /src/lib/motion-start/value/utils/resolve-motion-value.ts: -------------------------------------------------------------------------------- 1 | /** 2 | based on framer-motion@4.1.17, 3 | Copyright (c) 2018 Framer B.V. 4 | */ 5 | import { MotionValue } from ".."; 6 | import type { CustomValueType } from "../../types"; 7 | 8 | /** 9 | based on framer-motion@4.0.3, 10 | Copyright (c) 2018 Framer B.V. 11 | */ 12 | import { isCustomValue } from '../../utils/resolve-value.js'; 13 | import { isMotionValue } from './is-motion-value.js'; 14 | 15 | /** 16 | * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself 17 | * 18 | * TODO: Remove and move to library 19 | * 20 | * @internal 21 | */ 22 | function resolveMotionValue(value?: string | number | CustomValueType | MotionValue): string | number { 23 | var unwrappedValue = isMotionValue(value) ? value.get() : value; 24 | return isCustomValue(unwrappedValue) 25 | ? unwrappedValue.toValue() 26 | : unwrappedValue; 27 | } 28 | 29 | export { resolveMotionValue }; 30 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | import { cubicOut } from "svelte/easing"; 4 | import type { TransitionConfig } from "svelte/transition"; 5 | 6 | export function cn(...inputs: ClassValue[]) { 7 | return twMerge(clsx(inputs)); 8 | } 9 | 10 | type FlyAndScaleParams = { 11 | y?: number; 12 | x?: number; 13 | start?: number; 14 | duration?: number; 15 | }; 16 | 17 | export const flyAndScale = ( 18 | node: Element, 19 | params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 } 20 | ): TransitionConfig => { 21 | const style = getComputedStyle(node); 22 | const transform = style.transform === "none" ? "" : style.transform; 23 | 24 | const scaleConversion = ( 25 | valueA: number, 26 | scaleA: [number, number], 27 | scaleB: [number, number] 28 | ) => { 29 | const [minA, maxA] = scaleA; 30 | const [minB, maxB] = scaleB; 31 | 32 | const percentage = (valueA - minA) / (maxA - minA); 33 | const valueB = percentage * (maxB - minB) + minB; 34 | 35 | return valueB; 36 | }; 37 | 38 | const styleToString = ( 39 | style: Record 40 | ): string => { 41 | return Object.keys(style).reduce((str, key) => { 42 | if (style[key] === undefined) return str; 43 | return str + `${key}:${style[key]};`; 44 | }, ""); 45 | }; 46 | 47 | return { 48 | duration: params.duration ?? 200, 49 | delay: 0, 50 | css: (t) => { 51 | const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]); 52 | const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]); 53 | const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]); 54 | 55 | return styleToString({ 56 | transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`, 57 | opacity: t 58 | }); 59 | }, 60 | easing: cubicOut 61 | }; 62 | }; -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/routes/docs/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /static/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonathonRP/motion-start/45bffb41b61291534f5c8355620d2e327e363dae/static/favicon.png -------------------------------------------------------------------------------- /static/fonts/giest-mono.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonathonRP/motion-start/45bffb41b61291534f5c8355620d2e327e363dae/static/fonts/giest-mono.ttf -------------------------------------------------------------------------------- /static/fonts/giest-sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonathonRP/motion-start/45bffb41b61291534f5c8355620d2e327e363dae/static/fonts/giest-sans.ttf -------------------------------------------------------------------------------- /static/logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/JonathonRP/motion-start/45bffb41b61291534f5c8355620d2e327e363dae/static/logo.webp -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import adapter from '@sveltejs/adapter-auto'; 2 | 3 | /** @type {import('@sveltejs/kit').Config} */ 4 | const config = { 5 | kit: { 6 | // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list. 7 | // If your environment is not supported, or you settled on a specific environment, switch out the adapter. 8 | // See https://kit.svelte.dev/docs/adapters for more information about adapters. 9 | adapter: adapter(), 10 | }, 11 | compilerOptions: { 12 | runes: false, 13 | }, 14 | }; 15 | 16 | export default config; 17 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | import Typography from '@tailwindcss/typography' 3 | const config: Config = { 4 | content: ["./src/**/*.{html,js,svelte,ts}"], 5 | theme: { 6 | container: { 7 | center: true, 8 | padding: "2rem", 9 | screens: { 10 | "2xl": "1400px" 11 | } 12 | }, 13 | }, 14 | plugins: [ 15 | Typography 16 | ] 17 | }; 18 | 19 | export default config; 20 | -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | // Configure Vitest (https://vitest.dev/config/) 6 | 7 | import { sveltekit } from '@sveltejs/kit/vite'; 8 | import tailwindcss from '@tailwindcss/vite'; 9 | import { defineConfig } from 'vite'; 10 | 11 | export default defineConfig({ 12 | plugins: [tailwindcss(), sveltekit()], 13 | test: { 14 | /* for example, use global to avoid globals imports (describe, test, expect): */ 15 | globals: true, 16 | typecheck: { 17 | enabled: true, 18 | }, 19 | }, 20 | server: { 21 | port: 5000, 22 | strictPort: true, 23 | host: '127.0.0.1', 24 | }, 25 | }); 26 | --------------------------------------------------------------------------------