Midwest Component Library v0.24.0

Previews

No matching results.

x
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
27
<style>
  .io-reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .io-reveal.reveal-in {
    opacity: 1;
    transform: none;
  }
</style>
<div class="flex flex-col gap-4">
  <p class="text-gray-3">Scroll down ↓</p>
  <div style="height: 150vh"></div>
  <div data-controller="midwest-intersection-observer" data-midwest-intersection-observer-threshold-value="0.5" data-midwest-intersection-observer-root-margin-value="0px" data-midwest-intersection-observer-once-value="true" data-midwest-intersection-observer-visible-class-value="reveal-in" class="midwest-intersection-observer io-reveal">
    <article data-controller="midwest-card" class="midwest-card max-w-md">
      <div class="wrap">
        <section>
          <p class="font-medium">I fade in when half of me is visible.</p>
          <p class="text-gray-3">Because <code>once: true</code>, I stay put after the first reveal.</p>
        </section>
      </div>
    </article>
  </div>
  <div style="height: 100vh"></div>
</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
<style>
  .io-reveal {
    opacity: 0;
    transform: translateY(1.5rem);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .io-reveal.reveal-in {
    opacity: 1;
    transform: none;
  }
</style>
<div class="flex flex-col gap-4">
  <p class="text-gray-3">Scroll down ↓</p>
  <div style="height: 150vh"></div>
  <%= midwest_intersection_observer(threshold: 0.5, once: true, visible_class: "reveal-in", class: "io-reveal") do %>
    <%= midwest_card(class: "max-w-md") do %>
      <p class="font-medium">I fade in when half of me is visible.</p>
      <p class="text-gray-3">Because <code>once: true</code>, I stay put after the first reveal.</p>
    <% end %>
  <% end %>
  <div style="height: 100vh"></div>
</div>

Default

Scroll down until the card enters the viewport. When it does, the controller adds the visible_class and the card fades into place. once: true means it stays revealed after the first appearance.

No params configured.

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

Accessibility

Figma embed for Intersection Observer/default

Annotate a preview to embed its Figma design here:

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