Basic animation

Using the LiveMotion.motion component you can create simple animations. The following animation is set via assigns on the server, but the animation is performed on the client (the browser).

Try changing the transform value in the input field to see it in action.

          <LiveMotion.motion
  id="example-1-rectangle"
  class="w-24 h-24 bg-purple-600 rounded-lg"
  animate={[transform: "rotate(45deg)"]}
  transition={[duration: 0.5]}
>
</LiveMotion.motion>

        

You can also animate individual transforms via shorthands (e.g. x, y, scale, rotate).

          <LiveMotion.motion
  id="example-2-rectangle"
  class="w-24 h-24 bg-purple-600 rounded-lg"
  animate={[
    x: 65,
    rotate: 90,
    scale: 1.1
  ]}
  transition={[duration: 1]}
>
</LiveMotion.motion>

        

Transition

Transition options can be used to change things like duration, the easing curve and delay. The options are passed to the animate function from Motion One.

          <LiveMotion.motion
  id="example-3-rectangle"
  class="w-24 h-24 bg-purple-600 rounded-lg"
  animate={[rotate: 90]}
  transition={[
    duration: 1,
    repeat: 3,
    easing: "ease-in-out",
    direction: "alternate",
  ]}
>
</LiveMotion.motion>

        

Keyframes

You can also specify animation values as an array of values. These values will then be animated in sequence. In addition, an offset can be specified to determine on what point in time a certain keyframe should be reached.

          <LiveMotion.motion
  id="example-4-rectangle"
  class="w-24 h-24 bg-purple-600 rounded-lg"
  animate={[
    x: [0, -80, 80, 0]
  ]}
  transition={[
    duration: 2,
    offset: [0, 0.25, 0.75]
  ]}
>
</LiveMotion.motion>

        

Triggering animations client-side

Some animations do not require a round trip to the server. A common example is showing or hiding a modal dialog. The animation itself behaves the same as it is always performed on the client - it does not matter if it has been defined on the server before.

Please refer to LiveMotion.JS docs. More examples will follow.