A library for high performance LiveView animations

The link above looks suspicious… I wouldn’t click.

Update, indeed, the link has been updated and it is safe to watch.

Sorry, I could not find a way to embed a video here. I updated the link with a “direct” Link to the video. The link contains an online player.

Edit: Seems like it automatically detects video link. Should work now.

That’s pretty neat! I wonder how <.motion /> is implemented?

Quite nice how you can abstract away things such as animations using Phoenix function components. It reminds me of React.

I assume every animation frame is sent over the wire via LiveView (using slightly different style attribute).

Oh, and this is quite a stretch perhaps, but if you turn this into a library it would be nice to have an option to enable client-side animation. Cause I can imagine if a user is on a less stable connection (on mobile for example) the animation may not be so smooth.

^ Oh I misread, the animations do happen client side?

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 (Motion: JavaScript & React animation library). 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.

https://cleanshot-cloud-fra.accelerator.net/media/26144/p5RbCZhU7yRjtyBAb6E9U0LCNjzeJgBvGjP4Tqc7.mp4

Wow, this is seriously awesome!! Would love to experiment with it if you end up releasing it as a library.

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

What @03juan said^^

Thanks for the feedback. I appreciate it very much. So as I have quite a lot of fun building this anyway, I’ll release this as a library. It’s still missing a few features and tests - and docs of course.

I’ll have more time to work on it in a week, so I expect a first releasable version in two weeks or so. I’m pretty excited what else can be achieved here.

Funny how I spent this week thinking about animations in LiveView

Animations seemed to be the only missing convenience that’d make Elixir Desktop a competitive mobile framework.

Now it seems that’s being solved.

Kudos @benlime