Midwest Component Library v0.28.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
<div style="--motion-duration: var(--duration-slow);" class="midwest-motion motion-scale from-up trigger-load">
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <h4>Scales in on load</h4>
        <p>Plays immediately on connect — no scrolling required.</p>
      </section>
    </div>
  </article>
</div>
1
2
3
4
5
6
<%= midwest_motion(animation: :scale, trigger: :load, duration: :slow) do %>
  <%= midwest_card do %>
    <h4>Scales in on load</h4>
    <p>Plays immediately on connect — no scrolling required.</p>
  <% end %>
<% end %>

On load

trigger: :load plays the animation immediately on connect instead of waiting for the element to scroll into view.

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

Annotate a preview to embed its Figma design here:

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