Animotion 2
Changes
- @animotion/core standalone package
- View Transitions API for layout animations
- Slide events are now props
- Svelte 5
- SvelteKit template
- Tailwind 4 for styling
Animotion Core
Animotion is now a standalone package named @animotion/core
. This makes it easy to update to future versions, and using Animotion inside existing Svelte projects:
<script>
import { Presentation, Slide } from '@animotion/core'
</script>
<Presentation>
<Slide>
<p>🪄 Animotion</p>
</Slide>
</Presentation>
View Transitions API
Animotion takes advantage of the View Transitions API for layout animations. You can use the <Transition>
component to assign a view-transition-name
to an element:
⚠️ The View Transitions API is only supported in Chromium based browsers at the moment.
<script>
import { Presentation, Slide, Transition } from '@animotion/core'
</script>
<Presentation>
<Slide>
<Transition>
<p>🪄 Animotion</p>
</Transition>
</Slide>
</Presentation>
Besides transitions, you can use actions which lets you step through the slide, and run code that updates the presentation.
Slide Events
The previous on:in
and on:out
events are now regular props:
<script>
import { Presentation, Slide } from '@animotion/core'
</script>
<Presentation>
<Slide in={() => alert('in')} out={() => alert('out')}>
<p class="text-8xl">Slide</p>
</Slide>
</Presentation>
Svelte 5
Animotion uses signals for reactivity:
<script>
let diameter = $state(4)
let radius = $derived(diameter / 2)
</script>
<p>Radius of the circle is: {radius}</p>
The same is true for tween
which is no longer a Svelte store requiring the $
prefix to subscribe to the value:
<script>
import { tween } from '@animotion/motion'
let coords = tween({ x: 0, y: 0 })
</script>
<button onclick={() => coords.to({ x: 100, y: 100 })}>
x: {coords.x}
y: {coords.y}
</button>
SvelteKit
Animotion is now a SvelteKit template, so you don’t need a separate server if you need an endpoint, or embed an <iframe>
in your slide. Learn more by reading the SvelteKit docs.
Tailwind 4
Tailwind 4 is a huge leap in terms of developer experience over older versions of Tailwind, as it makes the framework feel CSS-native, and less like a JavaScript library.