🍿 LiveMotion - High performance animations for Phoenix LiveView

Your Libraries & OS Mentoring Libraries
, ,
1

live-motion
live-motion780Ă—200 57.9 KB

LiveMotion enables high performance animations declared on the server and run on the client.

As a follow up to my previous thread A library for high performance LiveView animations I released the first initial version 0.1.0 of the library for you to play around with it.

There is still a lot to do, but works as a first version. I would be glad if you give it a try. I hope it makes animations using LiveView a lot more convenient.

Docs: LiveMotion — LiveMotion v0.3.1
Repo: GitHub - benvp/live_motion: High performance animation library for Phoenix LiveView
Examples: https://livemotion.benvp.co

https://cleanshot-cloud-fra.accelerator.net/media/26144/yvBCYQ2B1940j2e20mhHJO12vauM1cfJo5gJgRP0.mp4
https://cleanshot-cloud-fra.accelerator.net/media/26144/p5RbCZhU7yRjtyBAb6E9U0LCNjzeJgBvGjP4Tqc7.mp4
If it would be preferable to merge it with my previous thread, please do so :slight_smile: I just thought it would be better to have a distinct thread for it.

Cheers
Ben

74 Likes
2

Just release v0.1.2 which adds the LiveMotion.JS.show/1 function. This function was previously mentioned in the docs, but did not exist yet.

This let’s you now add client side animations for dynamically showing elements (e.g. on button clicks).

11 Likes
3

Well done @benlime

Kudos!

1 Like
4

Haven’t had a chance to peak under the hood, but you might find my CubicBezier lib useful. Essentially a port of the CSS timing functions (similar to what is used in GS and other tweening libs).

3 Likes
5

Not sure if I am missing something, but I think that’s not required for LiveMotion because all animations happen on the client. So there is actually no need to have cubic-bezier functions within the Elixir codebase.

v0.2.0

I released a new version which introduces two new lifecycle functions on_animation_start and on_animation_complete. These will allow you to push events or run JS actions whenever an animation starts or ends. You can do something like the following (in a phx-click handler for example):

MotionJS.animate([rotate: [0, 45, -45, 90, 0]], [duration: 1], to: "#rectangle")
  |> MotionJS.show(to: "#love-div", keyframes: [opacity: 1, y: 20, rotate: 180])
  |> Phoenix.LiveView.JS.push("some_push")

Additionally fixes a bug that animations did not run on update.

5 Likes
6

I don’t think you’re missing anything. Like I said, I didn’t look at the code, and it wasn’t immediately clear where the animation positions were being computed. The cubic-bezier lib above is for replicating client-side tweening libraries, but computed on a server.

In my tests, it is technically feasible to “stream” positioning from the server using this lib, but it can be impractical for many use-cases (opting for a FLIP model where the actual animation is computed client-side). However, there are some nice use-cases for calculating the percentage of a tween based on the easing function.

7

I understand. With LiveMotion I’m striving to fully run all animations directly on the client. I know there are technical demos with streaming animations, but as you said, it is quite impractical for almost all use cases. That’s why LiveMotion only declares (on the server) how the animation should be performed. The JS part then reads the declaration and performs the animations on the client accordingly.

4 Likes
8

I added a website with a few examples of LiveMotion. I’ll add more in the next couple of weeks.

15 Likes
9

Awesome! Keep up with the good work :muscle:

5 Likes
10

Not all heroes wear capes!

3 Likes
11

I just released v0.3.0 of LiveMotion. This update includes support for LiveView 0.18 and adds a few new things. Check out the changelog.

Next up will be a new component called presence which will make transitions like the following possible.

I orignally wanted to include it in this release, but it is still a bit experimental and needs a bit of polishing.

Stay tuned.

19 Likes
12

This looks cool. I’m trying to figure out if I can use this for a project, but I’m unsure if even live view can do the animation I want. Basically, I need to make a cell of a table scale in and out when the value inside the table cell changes. The css to animate is pretty simple, something like:

@keyframes scaleInOut {
    0% {
        transform: scale(1);
        background: white;
    }

    50% {
        transform: scale(1.35);
        /* bg-amber-300 */
        background: rgb(252 211 77);
    }

    100% {
        transform: scale(1);
        background: white;
    }
}

But I’m not sure theres a phoenix hook for when an element is updated, not at least one we can get on the server side from what I can tell.

Only thing I can think to do is track the change on the server side and add the class, then in a second or so remove the class later. Seems overkill and maybe better to just do it with javascript. Any ideas? Will LiveMotion be able to do something like this?

13

Hey, sorry for replying so late. I added a little sample project on how you could make it work.

You can see/run the code directly here using Gitpod - Open Workspace. When opened, navigate to /content-update

Alternative the code is on github https://github.com/benvp/live_motion_examples/commit/ecee0db3d0e7ab618243d79fb8d0fb0d91e4bbd6

Right now I added a separate container for the highlight with an id, which changes when the data updates. This triggers the animation again. I originally had this in the container wrapping the value, but it results in UI flickering and sometimes multiple containers. I’m not sure yet what the cause of this is.

Hope it helps.

1 Like
14

This seems to be private.

15

You need to have a Gitpod account. The repo is publicly available. If you have a (free) gitpod account you can open it up in your browser. Otherwise you can check out this repo locally and run it on your machine.

16

This also gives me a 404 :smiley:

17

Oh boy,… the example repo has been private. No idea why I haven’t made that public. Should work now.

3 Likes
18

Wow super cool, thanks for the example!

For others coming here later, I made a gif screenshot to see what it does.

Screen-Recording-2022-12-03-at-11.07.39-PM

I was doing this with a phoenix hook before, to add the class (and this works) but I’d much prefer your version so I’ll definitely give this a try. Another one that I am unclear how to do at all with LiveView is animating a row movement in a table which happens from a server side event.

That is, if a table has row A, B and C, then an event server side says the order should be C, B, A, I’d like to animate the movement of those rows instead of just making them appear in their new location. Basically, in your example, just do an Enum.shuffle() on the instead of the 3 columns you have. Is this possible at all with LiveView? I know it will just mutate the DOM directly whereas if you were doing this in JavaScript you’d have to manipulate the top position with the element being absolutely positioned to put it into its correct location, none of which information we have server side.

1 Like