svelte-motion
An animation library for Svelte based on framer-motion.
File Explorer
Download Latest Version (.zip)- settings.json
- default-transitions.js
- easing.js
- is-animatable.js
- is-animation-controls.js
- is-keyframes-target.js
- transitions.js
- animate.js
- animation-controls.js
- use-animated-state.js
- use-animation.js
- UseAnimatedState.svelte
- UseAnimation.svelte
- AnimatePresence.svelte
- index.js
- PresenceChild.js
- PresenceChild.svelte
- use-presence.js
- batcher.js
- crossfader.js
- rotate.js
- stack.js
- AnimateSharedLayout.svelte
- index.js
- types.js
- index.js
- LazyMotion.svelte
- index.js
- MotionConfig.svelte
- MotionConfigScaleCorrection.js
- MotionDiv.svelte
- create.js
- index.js
- MotionContext.svelte
- MotionContextProvider.svelte
- UseCreateMotionContext.svelte
- utils.js
- DOMcontext.js
- LayoutGroupContext.js
- LazyContext.js
- MotionConfigContext.js
- PresenceContext.js
- ScaleCorrectionProvider.svelte
- SharedLayoutContext.js
- event-info.js
- use-dom-event.js
- use-pointer-event.js
- UseDomEvent.svelte
- UsePointerEvent.svelte
- utils.js
- constraints.js
- lock.js
- use-drag-controls.js
- use-drag.js
- UseDrag.svelte
- UseDragControls.svelte
- VisualElementDragControls.js
- event-type.js
- is-node-or-child.js
- PanSession.js
- use-focus-gesture.js
- use-gestures.js
- use-hover-gesture.js
- use-pan-gesture.js
- use-tap-gesture.js
- UseFocusGesture.svelte
- UseGestures.svelte
- UseHoverGesture.svelte
- UsePanGesture.svelte
- UseTapGesture.svelte
- Animate.js
- Animate.svelte
- AnimateLayoutContextProvider.svelte
- index.js
- Measure.js
- Measure.svelte
- MeasureContextProvider.svelte
- utils.js
- animations.js
- AnimationState.svelte
- definitions.js
- drag.js
- Exit.svelte
- gestures.js
- use-features.js
- UseFeatures.svelte
- is-forced-motion-value.js
- make-renderless-component.js
- use-motion-ref.js
- use-visual-element.js
- use-visual-state.js
- UseLayoutId.svelte
- UseVisualElement.svelte
- UseVisualState.svelte
- valid-prop.js
- index.js
- Motion.svelte
- MotionSSR.svelte
- convert-to-relative.js
- default-scale-correctors.js
- measure.js
- relative-set.js
- scale-correction.js
- utils.js
- batch-layout.js
- camel-to-dash.js
- create-config.js
- css-variables-conversion.js
- filter-props.js
- is-css-variable.js
- is-svg-component.js
- parse-dom-variant.js
- unit-conversion.js
- use-html-props.js
- use-svg-props.js
- UseInitialMotionProps.svelte
- animatable-none.js
- defaults.js
- dimensions.js
- find.js
- get-as-type.js
- number.js
- test.js
- type-auto.js
- type-int.js
- create-motion-class.js
- create-visual-element.js
- featureBundle.js
- M.svelte
- motion-minimal.js
- motion-proxy.js
- motion.js
- svg-visual-element.js
- use-render.js
- UseRender.svelte
- build-projection-transform.js
- build-styles.js
- build-transform.js
- create-render-state.js
- render.js
- scrape-motion-values.js
- transform.js
- config-motion.js
- use-props.js
- UseHTMLProps.svelte
- UseInitialMotionValues.svelte
- UseStyle.svelte
- visual-element.js
- build-attrs.js
- camel-case-attrs.js
- create-render-state.js
- path.js
- render.js
- scrape-motion-values.js
- transform-origin.js
- config-motion.js
- lowercase-elements.js
- use-props.js
- UseSVGProps.svelte
- visual-element.js
- animation-state.js
- animation.js
- compare-by-depth.js
- flat-tree.js
- is-draggable.js
- lifecycles.js
- motion-values.js
- projection.js
- setters.js
- state.js
- types.js
- variants.js
- index.js
- delta-apply.js
- delta-calc.js
- index.js
- array.js
- each-axis.js
- fix-process-env.js
- is-browser.js
- is-numerical-string.js
- is-ref-object.js
- noop.js
- resolve-value.js
- shallow-compare.js
- subscription-manager.js
- time-conversion.js
- transform.js
- use-constant.js
- use-cycle.js
- use-force-update.js
- use-isomorphic-effect.js
- use-reduced-motion.js
- use-unmount-effect.js
- UseUnmountEffect.svelte
- use-element-scroll.js
- use-viewport-scroll.js
- utils.js
- is-motion-value.js
- resolve-motion-value.js
- index.js
- use-combine-values.js
- use-motion-template.js
- use-motion-value.js
- use-spring.js
- use-transform.js
- use-velocity.js
- index.js
- components.test-d.ts
- svelteTypes.d.ts
- default-transitions.d.ts
- easing.d.ts
- is-animatable.d.ts
- is-animation-controls.d.ts
- is-keyframes-target.d.ts
- transitions.d.ts
- variant-resolvers.d.ts
- animate.d.ts
- animation-controls.d.ts
- types.d.ts
- use-animation.d.ts
- index.d.ts
- PresenceChild.d.ts
- types.d.ts
- use-presence.d.ts
- batcher.d.ts
- crossfader.d.ts
- rotate.d.ts
- stack.d.ts
- index.d.ts
- types.d.ts
- index.d.ts
- types.d.ts
- index.d.ts
- create.d.ts
- index.d.ts
- utils.d.ts
- LayoutGroupContext.d.ts
- LazyContext.d.ts
- MotionConfigContext.d.ts
- PresenceContext.d.ts
- SharedLayoutContext.d.ts
- event-info.d.ts
- types.d.ts
- use-dom-event.d.ts
- use-pointer-event.d.ts
- utils.d.ts
- constraints.d.ts
- lock.d.ts
- types.d.ts
- use-drag-controls.d.ts
- use-drag.d.ts
- VisualElementDragControls.d.ts
- event-type.d.ts
- is-node-or-child.d.ts
- PanSession.d.ts
- types.d.ts
- use-focus-gesture.d.ts
- use-hover-gesture.d.ts
- use-pan-gesture.d.ts
- use-tap-gesture.d.ts
- Animate.d.ts
- index.d.ts
- Measure.d.ts
- types.d.ts
- utils.d.ts
- animations.d.ts
- definitions.d.ts
- drag.d.ts
- gestures.d.ts
- types.d.ts
- use-features.d.ts
- is-forced-motion-value.d.ts
- make-renderless-component.d.ts
- should-inherit-variant.d.ts
- use-motion-ref.d.ts
- use-visual-element.d.ts
- use-visual-state.d.ts
- valid-prop.d.ts
- index.d.ts
- types.d.ts
- convert-to-relative.d.ts
- default-scale-correctors.d.ts
- measure.d.ts
- relative-set.d.ts
- scale-correction.d.ts
- types.d.ts
- utils.d.ts
- batch-layout.d.ts
- camel-to-dash.d.ts
- create-config.d.ts
- css-variables-conversion.d.ts
- filter-props.d.ts
- is-css-variable.d.ts
- is-svg-component.d.ts
- parse-dom-variant.d.ts
- unit-conversion.d.ts
- animatable-none.d.ts
- defaults.d.ts
- dimensions.d.ts
- find.d.ts
- get-as-type.d.ts
- number.d.ts
- test.d.ts
- type-auto.d.ts
- type-int.d.ts
- types.d.ts
- create-visual-element.d.ts
- features-animation.d.ts
- features-max.d.ts
- motion-minimal.d.ts
- motion-proxy.d.ts
- motion.d.ts
- types.d.ts
- use-render.d.ts
- build-projection-transform.d.ts
- build-styles.d.ts
- build-transform.d.ts
- create-render-state.d.ts
- render.d.ts
- scrape-motion-values.d.ts
- transform.d.ts
- config-motion.d.ts
- supported-elements.d.ts
- types.d.ts
- use-props.d.ts
- visual-element.d.ts
- build-attrs.d.ts
- camel-case-attrs.d.ts
- create-render-state.d.ts
- path.d.ts
- render.d.ts
- scrape-motion-values.d.ts
- transform-origin.d.ts
- config-motion.d.ts
- lowercase-elements.d.ts
- supported-elements.d.ts
- types.d.ts
- use-props.d.ts
- visual-element.d.ts
- animation-state.d.ts
- animation.d.ts
- compare-by-depth.d.ts
- flat-tree.d.ts
- is-draggable.d.ts
- lifecycles.d.ts
- motion-values.d.ts
- projection.d.ts
- setters.d.ts
- state.d.ts
- types.d.ts
- variants.d.ts
- index.d.ts
- types.d.ts
- geometry.d.ts
- delta-apply.d.ts
- delta-calc.d.ts
- index.d.ts
- array.d.ts
- each-axis.d.ts
- is-browser.d.ts
- is-numerical-string.d.ts
- is-ref-object.d.ts
- noop.d.ts
- resolve-value.d.ts
- shallow-compare.d.ts
- subscription-manager.d.ts
- time-conversion.d.ts
- transform.d.ts
- use-constant.d.ts
- use-cycle.d.ts
- use-force-update.d.ts
- use-isomorphic-effect.d.ts
- use-reduced-motion.d.ts
- use-unmount-effect.d.ts
- use-element-scroll.d.ts
- use-viewport-scroll.d.ts
- utils.d.ts
- is-motion-value.d.ts
- resolve-motion-value.d.ts
- index.d.ts
- use-combine-values.d.ts
- use-motion-template.d.ts
- use-motion-value.d.ts
- use-spring.d.ts
- use-transform.d.ts
- use-velocity.d.ts
- index.d.ts
- tsdoc-metadata.json
- types.d.ts
- .gitignore
- LICENSE.md
- package-lock.json
- package.json
- README.md
- rollup.config.js
- svelte.config.js
- tsconfig.json
- vite.config.ts
# Installation Guide
1. Get the code
git clone https://github.com/micha-lmxt/svelte-motion
Downloads the entire project code from GitHub to your computer.
cd svelte-motion
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
npm install --save-dev svelte-motion
Downloads and installs the libraries listed in package.json.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
Pulled directly from this repo's README.
// repository documentation
Was this content helpful?
(0 ratings)