Motion

Basics

The smallest motion demos: one effect, one name, exact timing, wrapped in MotionStage.

Every motion demo is wrapped in MotionStage: it plays only while it is in view, stops when you touch it, and shows its final state under prefers-reduced-motion. Read Motion for the contract.

#256

Fade rise

A card fades in while rising 16px into place: 420ms, an ease-out curve, an 80ms delay. Touch it to stop the loop.

Invoice paid

The card fades in and rises 16px into place.

Reference #256 · Pick in the gallery

Code

<script lang="ts">
  import { Card, MotionStage } from '@codeatlasdev/ui';
</script>

<MotionStage label="Fade rise: a card fades in while rising into place" loop={2400}>
  {#snippet children(m)}
    <!-- Keyed on the cycle: a new cycle mounts a fresh element, so the animation runs again. -->
    {#key m.cycle}
      <div class="rise" class:rise--run={!m.reduced}>
        <Card>
          <p class="rise__title">Invoice paid</p>
          <p class="rise__body">The card fades in and rises 16px into place.</p>
        </Card>
      </div>
    {/key}
  {/snippet}
</MotionStage>

<style>
  .rise { width: 100%; max-width: 320px; }
  .rise--run { animation: fade-rise 420ms cubic-bezier(0.2, 0, 0, 1) 80ms both; }
  .rise__title { margin: 0; font-weight: var(--ca-font-weight-semibold); }
  .rise__body { margin: var(--ca-space-1) 0 0; color: var(--ca-text-secondary); }
  @keyframes fade-rise {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>