Media wipe

The wipe plays once, as soon as the hero is 200px into view.

WIPE
OPEN

An inset() --steam-block-media-clip-path opens from the left while --steam-block-media-transform eases the zoom out. A delay in --steam-block-content-transition holds the headline back until the wipe is nearly done.

Code

<style>
.media-wipe {
  --steam-block-media-clip-path: inset(0 100% 0 0);
  --steam-block-media-transform: scale(1.2);
  --steam-block-media-transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1), transform 1.6s ease;
  --steam-block-content-opacity: 0;
  --steam-block-content-transition: opacity .6s ease .9s;
}
.media-wipe.emerge {
  --steam-block-media-clip-path: inset(0);
  --steam-block-media-transform: none;
  --steam-block-content-opacity: 1;
}
</style>
<steam-block class="media-wipe" type="hero" emerge="true" emerge-view="enter" emerge-offset="200" emerge-keep="true">
  <img slot="media" src="photo.jpg" alt="">
  <div slot="content"><h1>Wipe open</h1></div>
</steam-block>

Media wipe

WIPEOPEN

WIPE
OPEN