Staggered columns

← All examples

Plays once the whole strip is in view. Without emerge-keep it plays again whenever the strip scrolls out of view and back.

5attributes

1class toggled

0animation libraries

∞effects in CSS

Code

<style>
.stagger [slot="content"] {
  opacity: 0;
  transform: translateY(1.5rem) scale(.9);
  transition: opacity .5s ease, transform .5s cubic-bezier(.3, 1.6, .5, 1);
}
.stagger.is-visible [slot="content"] {
  opacity: 1;
  transform: none;
}
.stagger.is-visible [slot="content"]:nth-child(2) { transition-delay: .12s; }
.stagger.is-visible [slot="content"]:nth-child(3) { transition-delay: .24s; }
.stagger.is-visible [slot="content"]:nth-child(4) { transition-delay: .36s; }
</style>
<!-- emerge-class swaps the default "emerge" class for your own -->
<steam-block class="stagger" emerge="true" emerge-class="is-visible">
  <div slot="content">...</div>
  <div slot="content">...</div>
  <div slot="content">...</div>
  <div slot="content">...</div>
</steam-block>