Midwest Component Library v0.28.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
<div data-controller="midwest-motion" data-midwest-motion-threshold-value="0.15" data-midwest-motion-once-value="true" class="midwest-motion motion-scale motion-blur from-up trigger-reveal">
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <h4>Fades up into view</h4>
        <p>This card animates in the first time it scrolls into view.</p>
      </section>
    </div>
  </article>
</div>
1
2
3
4
5
6
<%= midwest_motion do %>
  <%= midwest_card do %>
    <h4>Fades up into view</h4>
    <p>This card animates in the first time it scrolls into view.</p>
  <% end %>
<% end %>

Default

Content fades and slides up into place the first time it scrolls into view. No-JS and reduced-motion visitors see it immediately, with no movement.

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/default

Annotate a preview to embed its Figma design here:

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