Auto-animate

Animating Elements

Thanks to the FLIP animation technique under the hood you can animate elements across slides using the animate attribute like magic. 🪄

Magic

🪄

Magic

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

<Presentation>
  <Slide animate>
    <p class="text-[100px]">Magic</p>
  </Slide>

  <Slide animate>
    <p class="text-[200px] text-teal-300">Magic</p>
  </Slide>

  <Slide animate>
    <p class="text-[200px]">🪄</p>
    <p class="mt-[48px] text-[200px] text-teal-300">Magic</p>
  </Slide>
</Presentation>

Matching

Matching works by looking at similar elements but sometimes you want to animate elements that aren't the same in which case you can use the data-id attribute.

Red

Green

Blue

Green

Red

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

<Presentation>
  <Slide animate>
    <div class="mx-auto flex w-[800px] justify-between text-gray-900">
      <div
        data-id="circle-1"
        class="grid h-[240px] w-[240px] place-content-center rounded-full bg-red-400"
      >
        Red
      </div>

      <div
        data-id="circle-2"
        class="grid h-[240px] w-[240px] place-content-center rounded-full bg-green-400"
      >
        Green
      </div>

      <div
        data-id="circle-3"
        class="grid h-[240px] w-[240px] place-content-center rounded-full bg-blue-400"
      >
        Blue
      </div>
    </div>
  </Slide>

  <Slide animate>
    <div class="mx-auto flex w-[800px] justify-between text-gray-900">
      <div
        data-id="circle-3"
        class="grid h-[240px] w-[240px] place-content-center rounded-full bg-blue-400"
      >
        Blue
      </div>

      <div
        data-id="circle-2"
        class="mt-[200px] grid h-[240px] w-[240px] place-content-center rounded-full bg-green-400"
      >
        Green
      </div>
      
      <div
        data-id="circle-1"
        class="grid h-[240px] w-[240px] place-content-center rounded-full bg-red-400"
      >
        Red
      </div>
    </div>
  </Slide>
</Presentation>

When Not To Use Auto-Animate

Auto-animate is great for animating layouts and code blocks, but not for regular animations.

You should animate the width and color properties with CSS, or using a JavaScript animation library instead.

Grouping Animated Slides

You might want to start a new slide in which case you can prevent auto-animate by using animateId or you can use animateRestart to prevent auto-animate between two slides even if they have the same id.

Group A

Group B

Group C

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

<Presentation>
  <!-- Group A -->
  <Slide animate>
    <p class="">Group A</p>
  </Slide>

  <Slide animate>
    <p class="text-red-400">Group A</p>
  </Slide>

  <!-- Group B -->
  <Slide animate animateId="two">
    <p>Group B</p>
  </Slide>

  <Slide animate animateId="two">
    <p class="text-green-400">Group B</p>
  </Slide>

  <!-- Group C -->
  <Slide animate animateId="two" animateRestart>
    <p>Group C</p>
  </Slide>

  <Slide animate animateId="two">
    <p class="text-blue-400">Group C</p>
  </Slide>
</Presentation>