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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<div data-controller="midwest-page-transition" data-midwest-page-transition-style-value="fade" data-midwest-page-transition-duration-value="var(--duration-slow)" data-midwest-page-transition-easing-value="var(--ease-emphasized)" aria-hidden="true" class="midwest-page-transition"></div><div class="p-6 space-y-4 max-w-lg overflow-hidden"> <div id="pt-named-a"> <article data-controller="midwest-card" class="midwest-card"> <div class="wrap"> <section> <img src="https://picsum.photos/seed/vta/600/240" alt="" class="w-full h-32 rounded-lg object-cover mb-4" style="view-transition-name: pt-demo-img;"> <p class="font-semibold mb-1" style="view-transition-name: pt-demo-title;">The View Transitions API</p> <p class="text-sm text-theme-7">3 min read · Web Platform</p> </section> </div> </article> </div> <div id="pt-named-b" style="display:none"> <div class="space-y-4"> <img src="https://picsum.photos/seed/vta/600/240" alt="The View Transitions API" class="w-full rounded-xl object-cover" style="view-transition-name: pt-demo-img; height: 180px;"> <div data-controller="midwest-prose" class="midwest-prose prose"> <h2 style="view-transition-name: pt-demo-title;">The View Transitions API</h2> <p>The image and heading each morphed from their card positions into the article layout — two named elements animating their geometry independently while everything else crossfaded.</p> </div> </div> </div> <div class="flex items-center gap-3"> <button type="button" id="pt-named-btn" class="midwest-button variant-default size-default theme-primary" name="button"> <span class="midwest-button-content">Open article →</span> <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none"> <div class="midwest-loading-icon-inner"> <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL --> <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true"> <circle cx="15" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="60" cy="15" r="9" fill-opacity="0.3"> <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate> </circle> <circle cx="105" cy="15" r="15"> <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate> <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate> </circle> </svg> </div> </div> </button> <span id="pt-named-no-support" class="text-sm text-theme-7" style="display:none"> View Transitions API not supported in this browser </span> </div> <pre class="text-xs bg-gray-100 rounded p-3"><%= tag.h2("Title", style: "view-transition-name: hero-title;") %></pre></div><script> (function () { var a = document.getElementById('pt-named-a'); var b = document.getElementById('pt-named-b'); var btn = document.getElementById('pt-named-btn'); var noSupport = document.getElementById('pt-named-no-support'); var fwd = 'Open article →'; var back = '← Back to card'; if (!document.startViewTransition) { btn.style.display = 'none'; noSupport.style.display = ''; return; } var showingA = true; btn.addEventListener('click', function () { document.startViewTransition(function () { a.style.display = showingA ? 'none' : ''; b.style.display = showingA ? '' : 'none'; showingA = !showingA; btn.querySelector('.midwest-button-content').textContent = showingA ? fwd : back; }); }); }());</script>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
33
34
35
36
37
38
39
40
41
<%= midwest_page_transition %><% page_a = capture do %> <%= midwest_card do %> <%= tag.img( src: "https://picsum.photos/seed/vta/600/240", alt: "", class: "w-full h-32 rounded-lg object-cover mb-4", style: "view-transition-name: pt-demo-img;" ) %> <%= tag.p( "The View Transitions API", class: "font-semibold mb-1", style: "view-transition-name: pt-demo-title;" ) %> <p class="text-sm text-theme-7">3 min read · Web Platform</p> <% end %><% end %><% page_b = capture do %> <div class="space-y-4"> <%= tag.img( src: "https://picsum.photos/seed/vta/600/240", alt: "The View Transitions API", class: "w-full rounded-xl object-cover", style: "view-transition-name: pt-demo-img; height: 180px;" ) %> <%= midwest_prose do %> <%= tag.h2("The View Transitions API", style: "view-transition-name: pt-demo-title;") %> <p>The image and heading each morphed from their card positions into the article layout — two named elements animating their geometry independently while everything else crossfaded.</p> <% end %> </div><% end %><%= render 'elements/page_transition_component_preview/demo', id: 'named', page_a: page_a, page_b: page_b, btn_forward: 'Open article →', btn_back: '← Back to card', code: '<%= tag.h2("Title", style: "view-transition-name: hero-title;") %>' %>Named element
Use midwest_page_transition_name to mark elements that should morph
between pages. The browser will smoothly animate the element's position
and size rather than crossfading the whole page.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Page Transition/named_element
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."