Skip to content
staticview

Reveal Animation Basic

Use class-to-add to apply a reveal class to children.

Code

The following example assumes that you have imported the component and set up the theme.

Reveal Animation
<div class="cards-container">
  <sv-reveal-animation class-to-add="fade-in">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </sv-reveal-animation>
</div>


<style>
17 collapsed lines
  .cards-container {
    display: flex;
    gap: 1em;
    justify-content: center;


    .card {
      inline-size: 100px;
      block-size: 100px;
      background-color: var(--sv-accent);
      border-radius: 4px;
      opacity: 0;
      translate: 0 20px;
      transition:
        opacity 1s linear,
        translate 1s ease;
    }


    .card.fade-in {
      opacity: 1;
      translate: 0 0;
    }
  }
</style>