Ghost Reveal example

Demonstration

Seven elements you already write. Under each one is the markup that runs it.

Scroll down to see each element

Heading example

A heading needs nothing else. #

A bare data-reveal is fade-up. It rises 16px and sharpens from a 4px blur in 700ms.

The heading

<h3 data-reveal>Ships tonight.</h3>

Paragraph example

fade changes opacity and blur only. The words do not move.

The sentence stays where it is. Only the focus changes.

The paragraph

<p data-reveal="fade">The sentence stays where it is. Only the focus changes.</p>

Figure example

zoom-in starts at 60% size, with the same 4px blur, and settles at 100%.

From 60% size.

The figure

<figure data-reveal="zoom-in">
  <figcaption>From 60% size.</figcaption>
</figure>

Quote example

fade-left starts 16px to the right and moves left into place.

It travels 16px, then stops.

The quote

<blockquote data-reveal="fade-left">
  <p>It travels 16px, then stops.</p>
</blockquote>

List example

data-reveal-stagger on the parent delays each child that enters in the same moment. At 120ms the steps are 0, 120 and 240.

The list

<ul data-reveal-stagger="120">
  <li data-reveal>First.</li>
  <li data-reveal>120ms later.</li>
  <li data-reveal>240ms later.</li>
</ul>

Button example

data-reveal-delay is added to that element only. The line beside it has none, so it moves first.

Starts at 0ms.

The pair

<p data-reveal>Starts at 0ms.</p>
<button type="button" data-reveal data-reveal-delay="400">Waits 400ms.</button>

Article example

data-reveal-duration and data-reveal-blur override the defaults on this article only. 1200ms, from a 10px blur.

1200ms, from a 10px blur.

The article

<article data-reveal data-reveal-duration="1200" data-reveal-blur="10">
  <h3>Release notes</h3>
  <p>1200ms, from a 10px blur.</p>
</article>

One script, then an attribute. The docs cover every option. The Playground has all 23 animations.