https://github.com/humanspeak/svelte-motion

https://github.com/humanspeak/svelte-motion

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/humanspeak/svelte-motion
• Owner: humanspeak
• License: mit
• Created: 2025-02-21T02:38:20.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-04-04T14:37:03.000Z (about 1 month ago)
• Last Synced: 2025-04-06T05:48:07.850Z (about 1 month ago)
• Language: TypeScript
• Homepage:
• Size: 768 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# @humanspeak/svelte-motion

[![NPM version](https://img.shields.io/npm/v/@humanspeak/svelte-motion.svg)](https://www.npmjs.com/package/@humanspeak/svelte-motion)

[![Build Status](https://github.com/humanspeak/svelte-motion/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/humanspeak/svelte-motion/actions/workflows/npm-publish.yml)

[![Coverage Status](https://coveralls.io/repos/github/humanspeak/svelte-motion/badge.svg?branch=main)](https://coveralls.io/github/humanspeak/svelte-motion?branch=main)

[![License](https://img.shields.io/npm/l/@humanspeak/svelte-motion.svg)](https://github.com/humanspeak/svelte-motion/blob/main/LICENSE)

[![Downloads](https://img.shields.io/npm/dm/@humanspeak/svelte-motion.svg)](https://www.npmjs.com/package/@humanspeak/svelte-motion)

[![CodeQL](https://github.com/humanspeak/svelte-motion/actions/workflows/codeql.yml/badge.svg)](https://github.com/humanspeak/svelte-motion/actions/workflows/codeql.yml)

[![Install size](https://packagephobia.com/badge?p=@humanspeak/svelte-motion)](https://packagephobia.com/result?p=@humanspeak/svelte-motion)

[![Code Style: Trunk](https://img.shields.io/badge/code%20style-trunk-blue.svg)](https://trunk.io)

[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)

[![Types](https://img.shields.io/npm/types/@humanspeak/svelte-motion.svg)](https://www.npmjs.com/package/@humanspeak/svelte-motion)

[![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://github.com/humanspeak/svelte-motion/graphs/commit-activity)

## Why are we here?

Just a little wrapper for motion. I love their work! The typical this is a WIP, if you have issues please give me a react example working so that I can work to ensure its running properly 😍

## Supported Elements

### Regular Elements

- `motion.a`

- `motion.article`

- `motion.aside`

- `motion.blockquote`

- `motion.button`

- `motion.code`

- `motion.dd`

- `motion.div`

- `motion.dl`

- `motion.dt`

- `motion.fieldset`

- `motion.figcaption`

- `motion.figure`

- `motion.footer`

- `motion.form`

- `motion.h1`

- `motion.h2`

- `motion.h3`

- `motion.h4`

- `motion.h5`

- `motion.h6`

- `motion.header`

- `motion.label`

- `motion.legend`

- `motion.li`

- `motion.main`

- `motion.nav`

- `motion.ol`

- `motion.option`

- `motion.p`

- `motion.pre`

- `motion.section`

- `motion.select`

- `motion.span`

- `motion.table`

- `motion.tbody`

- `motion.td`

- `motion.textarea`

- `motion.tfoot`

- `motion.th`

- `motion.thead`

- `motion.tr`

- `motion.ul`

### Void Elements

- `motion.area`

- `motion.base`

- `motion.br`

- `motion.col`

- `motion.embed`

- `motion.hr`

- `motion.img`

- `motion.input`

- `motion.param`

- `motion.source`

- `motion.track`

- `motion.wbr`

## Configuration

### MotionConfig

This package includes support for `MotionConfig`, which allows you to set default motion settings for all child components. See the [Reach - Motion Config](https://motion.dev/docs/react-motion-config) for more details.

```svelte

    

    Inherits 0.5s duration

```

#### Current Limitations

Some Motion features are not yet implemented:

- `reducedMotion` settings

- `features` configuration

- Performance optimizations like `transformPagePoint`

- Advanced transition controls

We're actively working on adding these features. Check our GitHub issues for progress updates or to contribute.

## External Dependencies

This package carefully selects its dependencies to provide a robust and maintainable solution:

### Core Dependencies

- **motion**

    - High-performance animation library for the web

    - Provides smooth, hardware-accelerated animations

    - Supports spring physics and custom easing

    - Used for creating fluid motion and transitions

### Examples

| Motion                                                                                                   | REPL                                                                                          |

| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |

| [React - Enter Animation](https://examples.motion.dev/react/enter-animation)                             | [View Example](https://svelte.dev/playground/7f60c347729f4ea48b1a4590c9dedc02?version=5.20.2) |

| [Random - Shiny Button](https://www.youtube.com/watch?v=jcpLprT5F0I) by [@verse\_](https://x.com/verse_) | [View Example](https://svelte.dev/playground/96f9e0bf624f4396adaf06c519147450?version=5.20.2) |

## License

MIT © [Humanspeak, Inc.](LICENSE)

## Credits

Made with ♥ by [Humanspeak](https://humanspeak.com)