DOCSEARCHbyAlgolia
Submit Docs

Animotion Documentation

repository·main·Indexed 23 days ago

https://github.com/animotionjs/animotion

A presentational framework for creating high-quality slides and code visualizations using Svelte, Reveal.js, and Tailwind CSS. It features a specialized Code component for animated code snippets with Magic Move transitions, supporting programmatic updates, insertions, removals, and line selections via a dedicated API.

Tokens
1.3K
Snippets
4
Records
11
Agent score
83%

What's inside Animotion

  4. Insert code at a specific line

    main

    Use the insert method to add code at a specific position. The input string should follow the format: <lineNumber>:<indentLevel> <codeContent>.

    • lineNumber: 1-indexed.
    • indentLevel: Optional. Number of indentation levels (tabs or spaces based on existing code).

    Example: To insert const a = 1; at line 5 with 2 levels of indentation:

    codeRef.insert`5:2 const a = 1;`

  6. Manage global presentation state with setPresentation and getPresentation

    main

    Animotion provides a mechanism to store and access the global RevealApi instance across your application. This is useful for controlling presentation state (like slides) from different components.

    1. Use setPresentation(reveal: RevealApi) to initialize the global state with a Reveal.js API instance.
    2. Use getPresentation() to retrieve a reactive object that exposes the current slides state.

  7. Animate code changes with the Code component API

    main

    The Code component exports several methods to transform the currently displayed code with smooth animations. These methods typically use tagged template literals.

    Transformation Methods

    • update(strings, ...expressions): Replaces the current code with new code.
    • append(strings, ...expressions): Appends new code to the end of the current code.
    • insert(strings, ...expressions): Inserts code at a specific line. Format: `line:indent code` (e.g., `5:2 const y = 2;`).
    • remove(strings, ...expressions): Removes lines by number. Supports single lines (5), ranges (5-7), or lists (5,7,9).
    • replace(from, to): Finds a specific code pattern and replaces it with new content.

    Selection Methods

    • selectLines(strings, ...expressions): Highlights specific lines. Supports ranges like `1-5, 10`.
    • selectLinesAdd(strings, ...expressions): Adds lines to the current selection without deselecting others.
    • select(strings, ...expressions): Highlights tokens matching a pattern. Supports filtering by line or index: `pattern :index` or `line pattern`.
    • selectAdd(strings, ...expressions): Adds matching tokens to the current selection.
    • scrollToLine(strings, ...expressions): Smoothly scrolls the container to make a specific line visible.

    Example: Updating and Selecting

    <script>
  let codeRef;
</script>

<Code bind:this={codeRef} code="console.log('hello')" lang="ts" />

<button on:click={() => codeRef.update`console.log('world')`}>
  Update
</button>

<button on:click={() => codeRef.selectLines`1-1`}>
  Highlight Line 1
</button>
    <Code bind:this={self} code={codes[0]} {lang} {theme} {options} {autoIndent} {...props} />

  8. Use the Code component for animated code snippets

    main

    The Code component is used to display and format code snippets in slides with smooth transitions (Magic Move). It supports single code blocks or an array of code blocks that can be navigated like steps in a presentation.

    Props

    • code: The initial code string to display.
    • codes: An array of code strings. If provided, the component renders a sequence of code blocks that can be navigated using the Action component (which provides undo/redo functionality).
    • lang: The language for syntax highlighting (e.g., ts, python).
    • theme: The Shiki theme to use (defaults to poimandres).
    • options: Configuration for @shikijs/magic-move (e.g., lineNumbers).
    • autoIndent: Automatically removes common leading indentation (defaults to true).
    • class: Additional CSS classes for the container.

  9. Import Animotion components

    main

    The Animotion library provides a suite of Svelte components for building presentations, animations, and interactive code displays. You can import these components from the main component entrypoint to build your UI.

    import {
  Action,
  Code,
  Embed,
  Notes,
  Presentation,
  Recorder,
  Slide,
  Slides,
  Transition
} from './lib/components';