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.

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

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

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.

Awesome! Keep up with the good work