Reveal

Content slides and fades into place the first time it scrolls into view.

enhancer
entrance
scroll
fade
since 0.1

Background Studio: tune it below, then copy the code

Your system asks for reduced motion: the demo shows its final state and nothing moves.

Live demo

Reveal example

One

Two

Three

Code

It follows the controls above: change an option and the code changes with it.

<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>

<div class="demo-row" data-motion="reveal" data-stagger="110">
  <div class="tile">One</div>
  <div class="tile">Two</div>
  <div class="tile">Three</div>
</div>

import { Reveal } from "./motion/react/Reveal";

<Reveal>Your content</Reveal>

<script setup lang="ts">
import Reveal from "./motion/vue/Reveal.vue";
</script>

<template>
  <Reveal>Your content</Reveal>
</template>

const el = document.querySelector("#title");
el.dataset.motion = "reveal";
// run the entrance again: axi0Motion.play(el, "reveal")

The wrappers: Reveal.tsx (React, TypeScript) and Reveal.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.

Options

Attribute	Default	What it does
`data-motion-from`	`below`	where it comes from
`data-motion-distance`	`24`	how far it travels, in pixels
`data-motion-duration`	`700`	milliseconds
`data-motion-delay`	`0`	milliseconds before it starts
`data-motion-stagger`	`0`	reveal the children one by one, this many milliseconds apart

Only elements still below the viewport when the page loads start hidden, so nothing a reader already sees flickers. Reduced motion: shown at once. Transform and opacity only, so nothing else on the page moves.

Size

reveal.js is 0.7 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.