Motion

LiveView commands for the motion library

Installation

If available in Hex, the package can be installed by adding motion to your list of dependencies in mix.exs:

def deps do
  [
    {:motion, "~> 0.1.0"}
  ]
end

For now you must vendor motion and add the event listener:

Download motions.js from the CDN: https://motion.dev/docs/quick-start#cdn into your assets/vendor directory

and import it in your app.js

import { animate } from "../vendor/motion"

then add an event listener for "motion:animate":

window.animate = animate;

window.addEventListener("motion:animate", e => {
  window.animate(e.target, e.detail.animations, e.detail.settings);
})

Then you can use Motion.animate similar to other Phoenix.LiveView.JS commands.

See the Motion module for documentation on calling that function.

Documentation can be generated with ExDoc and published on HexDocs. Once published, the docs can be found at https://hexdocs.pm/motion.