🍿 LiveMotion - High performance animations for Phoenix LiveView

benlime

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 · GitHub
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 I just thought it would be better to have a distinct thread for it.

Cheers
Ben

17 comments

#library #liveview #animation #livemotion

75 7462 17

2022-12-04 04:13:06 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

benlime

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).

Post #1

kingdomcoder

Well done @benlime

Kudos!

Post #2

bjunc

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).

Post #3

benlime

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.

Post #4

bjunc

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.

Post #5

benlime

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.

Post #6