@motionone/svelte

What is @motionone/svelte?

@motionone/svelte is a Svelte-specific package that provides powerful and easy-to-use animation capabilities. It leverages the Motion One library to offer a declarative way to create animations in Svelte applications.

What are @motionone/svelte's main functionalities?

Basic Animations

This feature allows you to create basic animations such as fading in and sliding up elements. The `animate` directive is used to define the animation properties.

<script>
  import { animate } from '@motionone/svelte';
</script>

<div use:animate={{ opacity: [0, 1], transform: ['translateY(20px)', 'translateY(0)'] }}>
  Fade in and slide up
</div>

Keyframe Animations

This feature allows you to create more complex animations using keyframes. The `animate` directive can take an array of keyframes to define the animation sequence.

<script>
  import { animate } from '@motionone/svelte';
</script>

<div use:animate={{ keyframes: [
  { opacity: 0, transform: 'translateY(20px)' },
  { opacity: 1, transform: 'translateY(0)' }
] }}>
  Keyframe animation
</div>

Spring Animations

This feature allows you to create spring-based animations, which provide a more natural and bouncy effect. The `spring` directive is used to define the spring properties.

<script>
  import { spring } from '@motionone/svelte';
</script>

<div use:spring={{ stiffness: 200, damping: 20 }}>
  Spring animation
</div>

Other packages similar to @motionone/svelte

svelte-motion

svelte-motion is another animation library for Svelte that focuses on providing a declarative way to create animations. It is similar to @motionone/svelte but may have different performance characteristics and API design.

svelte-transitions

svelte-transitions is a built-in Svelte package that provides basic transition effects. While it is not as feature-rich as @motionone/svelte, it is a good option for simple animations and transitions.

README

@motionone/svelte

Svelte bindings for Motion One.

📚 Documentation

Full docs for Motion One available at motion.dev.