Reveal

Things fading up as they scroll into view, a list arriving in order. If the script doesn't run, everything just shows.

Ketchup Kewpie mayonnaise Henderson's Relish

Markup

<ul>
  <li class="ob-reveal">Ketchup</li>
  <li class="ob-reveal">Kewpie mayonnaise</li>
</ul>

Behaviour

import { revealOnScroll, splitWords, revealWords } from "obvious/behaviours";

const stop = revealOnScroll(document);
revealWords(splitWords(heading)); // a heading, word by word

CSS

@import "obvious/css/components/reveal.css";