Scroll the blocks out of view and back to replay the slide. Without emerge-keep the class comes off again.
ONLY THE
TEXT MOVES
The reveal runs on --steam-block-content-opacity and --steam-block-content-transform, so the media is never hidden.
EVERY
TIME
--steam-block-content-transition sits in the starting rule, not only in the .emerge rule, so the slide plays both ways.
Code
<style>
.slide-in {
--steam-block-content-opacity: 0;
--steam-block-content-transform: translateX(-4rem);
--steam-block-content-transition: opacity .8s ease, transform .8s ease;
}
.slide-in.emerge {
--steam-block-content-opacity: 1;
--steam-block-content-transform: none;
}
</style>
<steam-block class="slide-in" emerge="true" emerge-view="enter" emerge-offset="200">
<img slot="media" src="photo.jpg" alt="">
<div slot="content"><h1>Only the text moves</h1></div>
</steam-block>