Shift (shift v0.1.0)

Animations for Phoenix LiveView, that just work.

Render a <.animated> element and the client runtime animates it in when it enters the DOM, animates it out when LiveView removes it, and FLIP-animates it to its new position whenever the layout shifts in between. The whole API is one component.

<.animated
  :for={card <- @cards}
  id={card.id}
  initial={%{y: 16, scale: 0.95}}
  exit={%{y: -16, scale: 0.95}}
  transition={%{type: :spring}}
>
  {card.label}
</.animated>

initial, animate and exit take a map of style values. Alongside plain CSS properties (opacity, background-color, height, ...) you can use shorthands for common CSS transforms — x, y, scale, rotate and friends — which the runtime composes into a single CSS transform string.

Transitions are tweens by default (duration, delay, easing). Pass transition: %{type: :spring, stiffness: 260, damping: 20, mass: 1} and the runtime solves the spring ODE and bakes the curve into keyframes — overshoot, under-/over-damped behavior, and interrupted motion all stay physical.

See the README for a tour of the common patterns (enter/exit, smart-resolved targets, FLIP, height animations).

Summary

Functions

animated(assigns)

Functions

animated(assigns)

Attributes

initial (:map) - style values applied before the enter animation. Defaults to nil.
animate (:map) - style values to animate to once in the DOM. Defaults to nil.
exit (:map) - style values to animate to when LiveView removes the element. Defaults to nil.
disable (:list) - inferred mid-life animations to opt out of for this element. Valid atoms: :position, :size. Defaults to none disabled. Defaults to [].
transition (:map) - Tween: %{duration: seconds, delay: seconds, easing: "ease-in-out"} where easing is any CSS easing-function string ("ease", "linear", "cubic-bezier(...)", "steps(...)", ...). Spring: %{type: :spring, stiffness: 260, damping: 20, mass: 1}. Defaults to %{}.
as (:string) - HTML tag to render — any valid element name (e.g. "li", "span", "section"). Defaults to "div".
class (:any) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block