# `Shift`
[🔗](https://github.com/alexberce/shift/blob/main/lib/shift.ex#L1)

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](readme.html) for a tour of the common patterns
(enter/exit, smart-resolved targets, FLIP, height animations).

# `animated`

## 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`

---

*Consult [api-reference.md](api-reference.md) for complete listing*