Midwest Component Library v0.28.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="space-y-4">
  <p>Scroll this element out of view and back to replay the animation.</p>
  <div style="height: 90vh;"></div>
  <div data-controller="midwest-motion" data-midwest-motion-threshold-value="0.15" data-midwest-motion-once-value="false" class="midwest-motion motion-slide from-up trigger-reveal">
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <section>
          <h4>Replays every time</h4>
          <p><code>once: false</code> resets the motion as it leaves the viewport.</p>
        </section>
      </div>
    </article>
  </div>
  
  <div style="height: 90vh;"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
<div class="space-y-4">
  <p>Scroll this element out of view and back to replay the animation.</p>
  <div style="height: 90vh;"></div>
  <%= midwest_motion(animation: :slide, direction: :up, once: false) do %>
    <%= midwest_card do %>
      <h4>Replays every time</h4>
      <p><code>once: false</code> resets the motion as it leaves the viewport.</p>
    <% end %>
  <% end %>
  <div style="height: 90vh;"></div>
</div>

Replay

once: false replays the animation every time the element re-enters the viewport, resetting as it leaves. Scroll it out and back to see it again.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Motion/replay

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."