One component. Real spring physics. Animate enter, exit, position
and size in plain HEEx — no phx-hook, no JS commands to wire up.
Render a list; add or remove items in your LiveView. Shift animates each card in when it arrives and out when it leaves — no per-element wiring.
Add and remove items in a grid.
<.animated
:for={card <- @cards}
id={card.id}
initial={%{y: 16, scale: 0.95}}
exit={%{y: -16, scale: 0.95}}
>
{card.n}
</.animated>Shuffle a list and Shift measures the layout delta, then animates every item from its old slot to its new one. Position is just another thing your server can change.
Add, remove, sort, or reorder — surviving items slide to their new positions via FLIP, added items fade in, removed items fade out.
<.animated :for={row <- @rows} id={row.id}>
{row.label}
</.animated>Type into the field — matching items animate in, non-matches drop out. Staggered enters, simultaneous exits, all driven by the filtered list on the server.
Type to filter — items animate out as they stop matching, and back in as they match.
<.animated
:for={name <- @results}
id={name}
initial={%{y: 8}}
exit={%{scale: 0.92}}
>
{name}
</.animated>
Animate from height: 0 to height: auto without measuring or freezing the box.
With a handle. The header is the toggle. The content animates its height — the content area is part of the same visual element as the handle.
<div class="overflow-hidden">
<button phx-click="toggle">Section title</button>
<.animated
:if={@open}
initial={%{height: 0}}
exit={%{height: 0}}
>
...content of any height...
</.animated>
</div>Plain toggle. The panel doesn't exist in the DOM until you click Show details — Shift animates it in the moment LiveView renders it, no hooks or mount lifecycle to wire up. Animates back out the moment LiveView removes it.
<button phx-click="toggle">
Show / Hide
</button>
<.animated
:if={@open}
initial={%{height: 0}}
exit={%{height: 0}}
>
A separate panel that slides open by animating its height.
</.animated>An overlay that pops in with a spring and fades out on dismiss. The transition map is the only thing different from a regular div.
A dialog that pops in with a spring and fades out on dismiss. The
transition
is the only thing different from a regular div.
<.animated
:if={@open}
initial={%{scale: 0.9, y: 8}}
exit={%{scale: 0.95}}
transition={%{type: :spring, stiffness: 300, damping: 26}}
>
Pops in with a spring, fades out on dismiss.
</.animated>Stiffness, damping, mass. Drag the sliders and watch the same animation change character — overshoot, settle, bounce. The runtime simulates and bakes keyframes per render.
A real spring simulation — tune its feel, then move the box. The same
transition
drives the FLIP slide here, and enter/exit elsewhere.
<.animated
transition={%{type: :spring, stiffness: 260, damping: 20, mass: 1.0}}
>
Any animation on this element runs as a real spring simulation —
enter, exit, position and size all share the same physics.
</.animated>The LiveView schedules an auto-dismiss with Process.send_after — Shift handles the in/out animation on the client. Server stays in charge.
Toasts slide in, then auto-dismiss after a few seconds.
No notifications.
<.animated
:for={toast <- @toasts}
id={toast.id}
initial={%{x: 48}}
exit={%{x: 48}}
>
{toast.text}
</.animated>
Click a column header — rows FLIP to their new positions. Same <.animated> component, rendered as a <tr> via the as attribute.
Click any column header to toggle sort. Add a new row to watch it slot into place, or remove one with ✕.
Caveat — a removed row collapses its cell padding but can't fully reach height: 0: <tr> elements derive their height from the tallest cell. Tables are unique in this regard — in any other container, the row would shrink all the way.
| Brass hinge | $12.50 | 38 | |
| Cedar plank | $18.00 | 76 | |
| Cinder block | $4.20 | 142 | |
| Drift magnet | $31.90 | 9 | |
| Eclipse vial | $88.00 | 4 |
<tbody>
<.animated
:for={row <- @rows}
as="tr"
id={row.id}
exit={%{height: 0, opacity: 0}}
>
<td>{row.name}</td>
<td>{row.price}</td>
<td>{row.stock}</td>
</.animated>
</tbody>A searchable list of hundreds of rows, backed by a LiveView stream. Filtering drops or adds a lot of rows at once, and Shift keeps it smooth by only animating the rows on screen. The list stays responsive no matter how long it gets.
Search or flip starred only and the server re-streams the matches. Rows that drop out collapse away, rows that return slide back in, and the rest hold their place.
def handle_event("toggle-starred", _, socket) do
{:noreply,
socket
|> update(:starred_only, &(!&1))
|> stream(:tracks, visible(socket.assigns), reset: true)}
end
<div id="tracks" phx-update="stream">
<.animated
:for={{dom_id, track} <- @streams.tracks}
as="div"
id={dom_id}
exit={%{height: 0, opacity: 0}}
>
{track.title}
</.animated>
</div>Moving a DOM node between parents is normally a destroy-and-rebuild — the kind of thing that breaks every in-flight animation. Shift preserves the node and carries the motion straight across the parent change.
Use ← and → on any card to send it between columns. Add a new Todo, or drop one with ✕.
<section :for={col <- @columns}>
<h3>{col.name}</h3>
<.animated :for={card <- col.cards} id={card.id}>
{card.title}
</.animated>
</section>A 48px album art in the bottom bar; the same DOM node becomes a 200px hero when the player expands. Shift carries it across the parent change, animating position, size, and corner radius on one spring. This is the shared-element transition you've felt on every iOS app.
Tap the mini-player. The album art is the same DOM node in both states — Shift carries it from the 48px thumbnail in the bottom bar to the 200px hero of the full view, animating position, size, and corner radius together. Title swaps scale on the same spring; the rest of the chrome enters and exits around them.
<%= if @expanded do %>
<div class="full-player">
<.animated id="player-art" class="size-[200px] rounded-2xl" />
<.animated id="player-title" class="text-[28px]">
{song.title}
</.animated>
<p>{song.artist}</p>
<progress />
<div class="controls">⏮ ▶ ⏭</div>
</div>
<% else %>
<button class="mini-bar" phx-click="expand">
<.animated id="player-art" class="size-12 rounded-md" />
<.animated id="player-title" class="text-[15px]">
{song.title}
</.animated>
<span class="play-icon">▶</span>
</button>
<% end %>Wrap an element in <.animated> and Shift takes over. Sensible defaults handle the common cases — fade in on enter, fade out on exit, FLIP on position change. Pass props only when you want to deviate.
Shift uses a real spring solver — stiffness, damping, mass. Where keyframe animations restart on interruption and snap on redirection, springs blend velocities and flow continuously into whatever new state arrives.
Your LiveView re-renders for the reasons it always does — data changed. Shift turns that DOM diff into motion. You write Elixir; the animation falls out.
Add the dep, import the JS, render the component. Shift carries its own runtime — there's nothing else to wire.
{:shift, "~> 0.2.1"}
import { init as initShift } from "shift"
initShift()
<.animated> ... </.animated>