@humanspeak/svelte-motion NPM

@humanspeak/svelte-motion

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 for more details.

<MotionConfig transition={{ duration: 0.5 }}>
    <!-- All motion components inside will inherit these settings -->
    <motion.div animate={{ scale: 1.2 }}>Inherits 0.5s duration</motion.div>
</MotionConfig>

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