Elixir Desktop seems really nice. I’d love to give it a try sometime! It’s absolutely awesome that LiveView can be used to create native applications.

Meanwhile I got seamless page transitions running. It’s as easy as just defining an exit prop to the motion component. There are three awesome things happening with it.

1. Automatically animate exits triggered from the server. This happens for example by a conditional render based on a prop. (e.g. @is_visible or something like this).
2. Trigger exits manually by e.g. binding it. phx-click={LiveMotion.JS.hide(to: "#main-content").
3. Automagically handle page transitions triggered by e.g. live_redirect.

Can’t wait until I can ship the first version of the library.

EDIT: If you like to see it live, you can test it on https://benvp.co (which is my little page )

Here is a quick demo:

Exactly, the animations fully happen on the client. The only thing which is sent over the wire are the animation props animate and transition. There is also a prop initial which allows you to set an initial state (think of enter animations where you need the state to be something else on initial mount).

This also works flawlessly when re-triggering animations. When you hammer the button in the video, it will just animate in the other direction from the exact point when you clicked at it. You can even do complex animations with multiple steps by just providing e.g. animate={[x: [0, 200, 100, 50, 100]}.

The function component itself currently is extremely simple. I’ll just paste it.

def motion(assigns) do
    rest = assigns_to_attributes(assigns, [:animate, :transition, :initial])

    initial =
      case assigns[:initial] do
        nil ->
          nil

        initial ->
          (initial || assigns.animate)
          |> LiveMotion.Style.create_styles()
          |> LiveMotion.Style.to_style_string()
      end

    assigns =
      assigns
      |> assign_new(:animate, fn -> [] end)
      |> assign_new(:transition, fn -> [] end)
      |> assign(:style, initial)
      |> assign(:rest, rest)

    ~H"""
    <div
      id={@id}
      phx-hook="Motion"
      data-motion={LiveMotion.animate(@animate, @transition)}
      style={@style}
      {@rest}
    >
      <%= render_slot(@inner_block) %>
    </div>
    """
  end

There is a phx-hook involved which utilities a tiny JS library (motion.dev) that performs animations using the browser WebAnimations API.

I took heavy inspiration in the API from framer-motion (Production-Ready Animation Library for React | Framer Motion). I really like their api design and the paradigm for declaring animations. Still, I have to implement a few features and figure out things, like:

• Exit/Unmount animations (Presence).
• Declaring animations for pure client side interactions. My idea here is currently a thin wrapper around LiveView.JS.
• Dependant animations (layouts).
• Scroll animations
• Gestures, …

A lot of ideas, but I think in general most of it is somewhat possible.

I’m pretty amazed what you can do with LiveView. I just played around with declaring fully client-side interactions using a thin wrapper around LiveView.JS.

Toggle animations declared on the server, performed on the client without a round-trip. And you can even mix and match animations being updated from the server and the animations already running locally .

When clicking the square, the server updates the LiveView state, therefore updating the animation (again, it just sends one single declaration, nothing more).
When clicking the “Toggle me” button, no round-trip is made.

Hammering both just smoothly animates. Feels magical to me.

I released the first version of the library → See 🍿 LiveMotion - High performance animations for Phoenix LiveView

Fantastic addition to the live view paradigm. I feel at this point you have no choice but to release it as a library, to be honest.

With the upcoming changes in master this will be even more powerful

• Allow purely client JS commands to run when disconnected · phoenixframework/phoenix_live_view@1d70646 · GitHub
• Expose liveSocket on hook instances. Closes #1863 · phoenixframework/phoenix_live_view@d7c9fa2 · GitHub