Motion
Procedural Animations
Sometimes you need to animate values outside of CSS like SVG and Canvas values. Instead of reaching for a JavaScript library, you can use Motion by importing @animotion/motion
:
<script>
import { Presentation, Slide, Action } from '@animotion/core'
import { tween } from '@animotion/motion'
let cx = tween(0)
async function animate() {
await cx.to(600)
await cx.to(0, { delay: 300 })
}
</script>
<Presentation>
<Slide>
<svg width="800" height="200" viewBox="-100 0 800 200">
<circle cx={cx.current} cy={100} r={100} fill="#00ffff" />
<text
x={cx.current}
y={100}
font-family="Monaspace Neon"
font-size="48px"
text-anchor="middle"
dominant-baseline="middle"
>
{cx.current.toFixed(0)}
</text>
</svg>
<Action do={animate} />
</Slide>
</Presentation>
To create a value that you want to animate over time, use the tween
method. To animate the value, use the to
method. You can use the await
keyword to wait for the animation to finish.
You can animate any value, including CSS properties using the style
attribute, or Svelte’s style:
directive:
<script>
import { Presentation, Slide, Action } from '@animotion/core'
import { tween } from '@animotion/motion'
let text = tween(1)
async function animate() {
await text.to(3)
await text.to(1)
}
</script>
<Presentation>
<Slide>
<!-- using the style attribute -->
<p style="scale: {text.current}">Motion</p>
<!-- using the Svelte directive -->
<p style:scale={text.current}>Motion</p>
<Action do={animate} />
</Slide>
</Presentation>
Tween multiple values
You can tween
a single value, objects, arrays, and override the default animation options using the duration
, delay
, and easing
options:
<script>
import { Presentation, Slide, Action } from '@animotion/core'
import { tween } from '@animotion/motion'
const circle = tween(
{ x: 0, y: 100, r: 100, fill: '#00ffff' },
{ duration: 1500 }
)
async function animate() {
await circle.to({ x: 600, fill: '#ffff00' }, { delay: 300 })
await circle.to({ x: 0, fill: '#00ffff' })
}
</script>
<Presentation>
<Slide>
<svg viewBox="-100 0 800 200">
<circle
cx={circle.x}
cy={circle.y}
r={circle.r}
fill={circle.fill}
/>
</svg>
<Action do={animate} />
</Slide>
</Presentation>
You can use obj.current.property
to access the object property, but Motion creates an accessor for every property, so you can omit .current
and say obj.property
.
Combine animations
If you want to play multiple animations at the same time without having to think about where to put the await
keyword you can combine them using the all
helper method:
<script>
import { Presentation, Slide, Action } from '@animotion/core'
import { tween, all } from '@animotion/motion'
let circle = tween({ x: 0, y: 100, r: 100, fill: '#00ffff' })
let text = tween({ count: 0 })
async function animate() {
await all(
circle.to({ x: 600, fill: '#ffff00' }),
text.to({ count: 600 })
)
await all(
circle.to({ x: 0, fill: '#00ffff' }),
text.to({ count: 0 })
)
}
</script>
<Presentation>
<Slide>
<svg width="800" height="200" viewBox="-100 0 800 200">
<circle
cx={circle.x}
cy={circle.y}
r={circle.r}
fill={circle.fill}
/>
<text
x={circle.x}
y={circle.y}
font-family="Monaspace Neon"
font-size={circle.r * 0.4}
text-anchor="middle"
dominant-baseline="middle"
>
{text.count.toFixed(0)}
</text>
</svg>
<Action do={animate} />
</Slide>
</Presentation>
Sound Effects
Besides playing animations you can play sounds using the sfx
method. After you place your sounds in the static
folder at the root of your project, they
become available from the root /
of your site:
<script>
import { Presentation, Slide } from '@animotion/core'
import { tween } from '@animotion/motion'
let circle = tween({ x: 0 })
async function animate() {
await circle.sfx('/sfx/transition.mp3').to({ x: 400 })
}
</script>
<Presentation>
<Slide in={animate}>
<svg viewBox="0 0 400 400">
<circle cx={circle.x} cy={200} r={100} fill="#00ffff" />
</svg>
</Slide>
</Presentation>
Reset
Instead of reloading the page to reset the state of your animation,
you can use the reset
method on the tween
to reset the animation back to its initial state.
<script>
import { Presentation, Slide } from '@animotion/core'
import { tween } from '@animotion/motion'
let value = tween(0)
</script>
<Presentation>
<Slide out={() => value.reset()}>
<!-- ... -->
</Slide>
</Presentation>