Animotion 2

Changes

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:

<script>
  import { Presentation, Slide, Transition } from '@animotion/core'
</script>

<Presentation>
  <Slide>
    <Transition>
      <p>🪄 Animotion</p>
    </Transition>
  </Slide>
</Presentation>

⚠️ The View Transitions API is only supported in Chromium based browsers at the moment.

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.