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">Observed content</p>
          <p class="text-gray-3">Adjust the parameters and scroll to see how it reacts.</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
27
28
29
30
31
32
<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: threshold,
    root_margin: root_margin,
    once: once,
    visible_class: visible_class,
    class: "io-reveal"
  ) do %>
    <%= midwest_card(class: "max-w-md") do %>
      <p class="font-medium">Observed content</p>
      <p class="text-gray-3">Adjust the parameters and scroll to see how it reacts.</p>
    <% end %>
  <% end %>
  <div style="height: 100vh"></div>
</div>

Playground

Param Description Input

Fraction of the element that must be visible (0–1)

Margin around the viewport root

Stop observing after the first entry

Class toggled while intersecting

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

Accessibility

Figma embed for Intersection Observer/playground

Annotate a preview to embed its Figma design here:

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