Animotion Presentation & Motion Suit

5 min readApr 21, 2024

Create Beautiful Animated Presentations With Ease — Visualize ideas with code using web technologies.

Video Introduction by Joy of Code — Author of Animotion

Animotion is a presentational framework for creating beautiful slides and visualizing ideas with code using Svelte, Reveal.js and Tailwind CSS. Animotion (GitHub Repo) was created by Joy of Code (Matia) and his team.

Animotion Preview GIF (Courtesy of Animotion)

Animotion Playground

You can try Animotion in the browser thanks to SvelteLab. You might have to enable cookies for the web container to work.

Installation

Animotion uses PNPM as a package manager and it is recommended that you install and use PNPM. This can easily be done by running the following command.

npm i -g pnpm

Create a new Animotion Project

You can quickly create a new Animotion project by running the following command.

pnpx @animotion/create


┌ Welcome to Animotion!
│
◇ Where should I create your project?
│  (press Enter to use the current directory)
│
◇ Install dependencies? (requires pnpm)
│  Yes
│
◇ Installed dependencies.
│
└  Done. 🪄

💿️ Start the development server:
pnpm run dev

💬 Discord
https://joyofcode.xyz/invite

After the command is done running, cd into the newly created directory and install the project dependencies using pnpm install. Once the dependencies have been installed, you can start the project by running the Vite dev command. pnpm run dev and open the page located at http://localhost:5173

First Slide

To create a slide, open the default presentation file called slides.svelte located at src/slides.svelte this file contains the initial slideshow.

Project Structure

Slides File

When you first open the slides.svelte file, you should copy and paste the following into the file as it is a blank presentation with only one slide. This gives us a blank slate to work from.

<script lang="ts">
 import { Presentation, Slide, FitText } from '@components'
 
</script>
<!-- 
  <Presentation> is the top level presentation
  all slides will be placed within this tag.
-->
<Presentation>
  <!-- Slides go here -->
  <Slide animate>
      <FitText>
          <!-- <FitText> fits the contents within the slide frame. -->
          Slide One
      </FitText>
  </Slide>
</Presentation>

Automatic Animation

Animation between slides is done AUTOMATICALLY with the animate keyword property. By using the animate keyword as such <Slide animate> each slide will animate between one another using the FLIP animation technique.

Code Boxes

<script lang="ts">
  // Add the import for the `Code` component
  import { Presentation, Slide, FitText, Code } from '@components'
 
</script>

<Presentation>
  <!-- Slide #1 -->
  <Slide animate>
      <FitText>
          Slide One
      </FitText>
  </Slide>
  <!-- Slide #2 -->
  <Slide animate>
    <!-- Use the `lang` prop to specify a language -->
    <Code lang="ts">
      {`
        const myString: string = "Hello, world";
        const myNumber: number = 47;
        const myBool: boolean = true;
      `}
    </Code>
  </Slide>

</Presentation>

By default higlight.js supports close to 200 languages but if your language is not supported you can add it.

Line Highlighting

You can animate line highlights using the lines prop and offset the line start by passing the offset prop.

lines="1-4" highlights lines 1 to 4
lines="1,4" highlights lines 1 and 4
lines="1-2|4" first highlights lines 1 to 2 then highlight line 4

Example:

<!-- Lighlights 6&8, next step 3&7, next step lines 1-8 -->
<Code lang="svelte" lines="6,8|3,7|1-8">
<!-- 
  The `|` indicates a progression, so you will need to hit the next slide
  button to progress to the next set of highlights.
-->

Highlighted Code Animations

You can provide a steps prop to specify what animations you want to play based on the currently highlighted line.

<Code
  lang="ts"
  lines="1,4|2|3|1-4"
  steps={[
    ['2', async () => await circle.to({ x: 400, fill: '#ffff00' })],
    ['3', async () => await circle.to({ x: 0, fill: '#00ffff' })],
    ['1-4', () => circle.reset()],
  ]}
>
  {`
    async function animate() {
      await circle.to({ x: 400, fill: '#ffff00' })
      await circle.to({ x: 0, fill: '#00ffff' })
    }
  `}
</Code>

Slide Props

Styling Options

Animotion comes with support for the following styling options:

Use any CSS Framework (Animotion is just Svelte + Vite)
TailwindCSS Included (TailwindCSS comes installed with Animotion)
<style> tags with regular CSS

Animation /w Motion

What Is Motion?

Animotion is great for animating layouts and code blocks, but Motion is the missing piece for doing animations.
Instead of being limited to animating CSS properties using a JavaScript animation library, or the Web Animations API , it uses values that change over time.
~ Animotion Documentation

Animating Values

You can use a signal to create a value that changes over time.
Animate the value using the to method, and use the await keyword to start the animation. The next animation only plays once the previous animation is done. You can chain multiple to methods together.
~ Animotion Documentation

Animation Example

<script lang="ts">
  import { Presentation, Slide } from '@components'
  // Import the `signal` component from `@motion`
  import { signal } from '@motion'
  
  // Create a new `signal` with initial value `0`
  // Signals function VERY similarly to Svelte stores.
  // $circleX gives the value of the signal like a Svelte store.
  let circleX = signal(0)

  // Function `animate()` which animates `0` -> `400` -> `0`
  async function animate() {
    await circleX.to(400).to(0)
  }
</script>

<Presentation>
  <!-- 
    `on:in` means on the `in` event, call the `animate()` function
    to begin the animation.
  -->
  <Slide on:in={animate}>
    <svg viewBox="0 0 400 400">
      <circle cx={$circleX} cy={200} r={100} fill="#00ffff" />
    </svg>
  </Slide>
</Presentation>

Speaker Notes

The last section of this article talks about one of the coolest features of Animation. Speaker Notes

You can write down notes inside the <Notes> component for the current slide which is only visible to you inside the speaker view if you press S on the keyboard.
~ Animotion Documentation

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

<Presentation>
  <Slide>
    Horizontal 1
    <Notes>Don't make eye contact</Notes>
  </Slide>

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