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-base); --motion-easing: var(--ease-standard); --motion-delay: 0ms; --motion-distance: var(--space-sm);" data-controller="midwest-motion" data-midwest-motion-threshold-value="0.15" data-midwest-motion-once-value="true" class="midwest-motion motion-fade from-up trigger-reveal">
  <article data-controller="midwest-card" class="midwest-card">
    <div class="wrap">
      <section>
        <h4>Motion playground</h4>
        <p>Adjust the controls, then scroll me into view (or reload for load).</p>
      </section>
    </div>
  </article>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<%
  # Toggles default: slide on, the rest off. An empty set still fades (opacity
  # is the base), so fall back to :fade for a visible baseline.
  animation = {
    slide: params[:slide],
    scale: params[:scale],
    rotate: params[:rotate],
    blur: params[:blur]
  }.select { |_, on| on }.keys
  animation = [:fade] if animation.empty?
%>
<%= midwest_motion(
  animation: animation,
  direction: (params[:direction].presence || "up").to_sym,
  trigger: (params[:trigger].presence || "reveal").to_sym,
  duration: (params[:duration].presence || "base").to_sym,
  easing: (params[:easing].presence || "standard").to_sym,
  delay: (params[:delay].presence || 0).to_i,
  distance: (params[:distance].presence || "default").to_sym,
  once: params[:once] != "false"
) do %>
  <%= midwest_card do %>
    <h4>Motion playground</h4>
    <p>Adjust the controls, then scroll me into view (or reload for load).</p>
  <% end %>
<% end %>

Playground

Explore the motion options live. Toggle any combination of primitives to compound them (each drives an independent property, so they layer); everything fades in regardless. Reload the preview to replay a trigger: :load animation.

Param Description Input

Slide

Scale

Rotate

Blur

—

—

—

—

Delay in milliseconds

—

Reveal only once

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

Accessibility

Figma embed for Motion/playground

Annotate a preview to embed its Figma design here:

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