@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

Examples

License

MIT © Humanspeak, Inc.

Credits

Made with ♥ by Humanspeak