View Source LiveMotion.JS (LiveMotion v0.1.1)

Provides functions for triggering client side animations without a round-trip to the server.

The functions in this module follow the same conventions (more or less) like in the Phoenix.LiveView.JS module and are intended to be used instead if you are dealing with animations. Most of the functions return a Phoenix.LiveView.JS struct, so they can be composed with the LiveView utility functions.

The following utilities are included:

  • animate - Triggers an animation on an element.
  • toggle - Toggles between two animations.
  • hide - Performs an animation and hides the element from the DOM.
  • show - Shows elements and immediately performs the animation.

Consider the following example to hide an element without a round-trip to the server.

def popcorn(assigns) do
  ~H"""
  <div>
    <LiveMotion.motion
      id="popcorn"
      initial={[opacity: 1]}
      exit={[opacity: 0]}
    >
      <span>🍿</span>
    </LiveMotion.motion>

    <button type="button" phx-click={LiveMotion.JS.hide(to: "#popcorn")}>
      Eat popcorn
    </button>
  </div>
  """
end

Clicking the "Eat popcorn" button will trigger the exit animation on the motion element. You can also define animations in the call to LiveMotion.JS.hide/1. See it's documentation for more information.

Link to this section Summary

Functions

Performs an animation and hides an element after the animation has finished.

Animates between two animation states.

Link to this section Functions

Link to this function

animate(keyframes, transition, opts \\ [])

View Source

Animates the target.

example

Example

def popcorn(assigns) do

~H"""
<div>
  <div id="popcorn" style="font-size: 64px">
    <span>🍿</span>
  </div>

  <button
    type="button"
    phx-click={
      LiveMotion.JS.animate(
        [rotate: [0, 20, -10, 30, -10, 0]],
        [duration: 0.5],
        to: "#popcorn"
      )
    }
  >
    Shake it!
  </button>
</div>
"""

options

Options

  • to - The query selector on which element to perform the animation. If the option is not provided, the target element will be used.

Performs an animation and hides an element after the animation has finished.

Triggers the exit animation defined on the target.

Additionally allows keyframes and transition to be defined. These will be used to animate the target element and therefore the target does not require to be a LiveMotion.motion component.

options

Options

  • to - The query selector on which element to perform the animation. If the option is not provided, the target element will be used.
  • keyframes - The keyframe keyword list defining the animations.
  • transition - Transition options.
Link to this function

toggle(keyframes, transition \\ [], opts \\ [])

View Source

Animates between two animation states.

example

Example

def popcorn(assigns) do

~H"""
<div>
  <div id="popcorn" style="font-size: 64px">
    <span>🍿</span>
  </div>

  <button
    type="button"
    phx-click={
      LiveMotion.JS.toggle(
        [
          in: [x: -200],
          out: [x: 200]
        ],
        [],
        to: "#popcorn"
      )
    }
  >
    Move popcorn
  </button>
</div>
"""

options

Options

  • to - The query selector on which element to perform the animation. If the option is not provided, the target element will be used.