Creating slides

Slide away

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

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

<script>
  import { Presentation, Slide, Vertical } from '@components'
</script>

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

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

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>
      <section>Vertical 1</section>
      <section>Vertical 2</section>
    </section>
  </div>
</div>

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 -->
<script>
  import { Slide } from '@components'
  import { animate, signal } from '@motion'

  let progress = signal(0)
  
  animate(async () => {
    await progress.to(10_000)
  })
</script>

<Slide>
  {$progress.toLocaleString('en', { maximumFractionDigits: 0 })}
</Slide>

<!-- src/slides.svelte -->
<script>
  import { Presentation } from '@components'
  import { Progress } from './progress.svelte'
</script>

<Presentation>
  <Progress />
</Presentation>

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.