Creating slides

Slide away

You can write the entire presentation inside src/slides.svelte but you can also break slides into components.

Horizontal 1
Horizontal 2
Vertical 1
Vertical 2

To create horizontal and vertical slides use the <Slide> component.

  import { Presentation, Slide, Vertical } from '@components'

  <Slide>Horizontal 1</Slide>
  <Slide>Horizontal 2</Slide>

    <Slide>Vertical 1</Slide>  
    <Slide>Vertical 2</Slide>  

Because Animotion is a wrapper around Reveal.js these examples are the same which means you can customize Animotion beyond what it can do.

<div class="reveal">
  <div class="slides">
    <section>Horizontal 1</section>
    <section>Horizontal 2</section>

      <section>Vertical 1</section>
      <section>Vertical 2</section>

You can customize Animotion by changing the existing presentation components and add new ones if you read the Reveal.js documentation.

Using components

You might have more complex presentations with state which can be hard to manage inside of a single file — in that case you can split your slides into components and place them wherever you want.

<!-- src/progress.svelte -->
  import { Slide } from '@components'
  import { animate, signal } from '@motion'

  let progress = signal(0)
  animate(async () => {

  {$progress.toLocaleString('en', { maximumFractionDigits: 0 })}
<!-- src/slides.svelte -->
  import { Presentation } from '@components'
  import { Progress } from './progress.svelte'

  <Progress />

You don't have to import the <Slide> component inside progress.svelte but it's useful if you want to use events to do some action.

You can store your components inside the lib folder and use the $lib alias, so you can avoid doing ../../ and use $lib/... instead.

Slide Props

These are the slide props you can pass to the <Slide> component. Some options for things like auto-animate have their dedicated section you can learn more about.

Prop Description
animate Animate elements between slides
animateEasing Pass CSS easing
animateUnmatched Animate elements that aren't a match
animateId Change the animate id for a slide
animateRestart Don't auto-animate from previous slide even if the animate id match
background Set slide background color
gradient Set gradient background
image Set image background
video Set video background
iframe Set iframe background
interactive Make iframe background interactive
transition none, fade, slide, convex, concave, zoom