@motionone/svelte

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>