Fade and rise

Scroll down to reveal the blocks. They stay once revealed (emerge-keep).

FADE

emerge="true" hooks the block into steam-emerge.js. It gets an emerge class while it is in view.

AND

emerge-view="enter" with emerge-offset="150" fires once the block is 150px into the viewport, instead of waiting for it to be fully visible.

RISE

emerge-keep="true" leaves the class on after the block scrolls away, so the reveal plays only once.

Code

<style>
.fade-rise {
  opacity: 0;
  transform: translateY(3rem);
  transition: opacity .9s ease, transform .9s ease;
}
.fade-rise.emerge {
  opacity: 1;
  transform: none;
}
</style>
<script src="steam-emerge.js" defer></script>
<script src="steam-block.js" defer></script>

<steam-block class="fade-rise" emerge="true" emerge-view="enter" emerge-offset="150" emerge-keep="true">
  <img slot="media" src="photo-1.jpg" alt="">
  <div slot="content"><h1>Fade</h1></div>
</steam-block>
<steam-block class="fade-rise" order="flip" emerge="true" emerge-view="enter" emerge-offset="150" emerge-keep="true">
  <img slot="media" src="photo-2.jpg" alt="">
  <div slot="content"><h1>And rise</h1></div>
</steam-block>