View Source LiveFlip (LiveFlip v0.1.2)

LiveFlip is a component for Phoenix.LiveView that allows the user to seamlessly add FLIP animations to their elements on the page.

Summary

Functions

Wraps an element with a FLIP animation. The element can be subsequently changed by changing its styling. Any change that has to do with positioning, scale, rotation, or opacity will be automatically animated through the FLIP technique.

Functions

flip_wrap(assigns)

Wraps an element with a FLIP animation. The element can be subsequently changed by changing its styling. Any change that has to do with positioning, scale, rotation, or opacity will be automatically animated through the FLIP technique.

FLIP stands for First, Last, Invert, Play. It is an animation technique coined by Paul Lewis in his article FLIP Your Animations, which describes the technique in detail. The technique has subsequently been added to many major libraries, as it adds the capability to seamlessly move elements around on a page.

Attributes

  • id (:string) (required) - The DOM identifier of the flip container tag.
  • duration (:integer) - The duration that the animation will last. Defaults to 300.
  • easing (:string) - The easing function to pass to the Web Animation API. Defaults to "ease-in-out".
  • fill (:string) - The fill function to pass to the Web Animation API. Defaults to "both".
  • debug (:boolean) - Add debug logs to the frontend so that you can debug the animations. Defaults to false.
  • Global attributes are accepted. Additional HTML attributes to add to the flip container tag.

Slots

  • inner_block (required) - The content rendered inside of the flip container tag.

Examples

Simply render your inner content within this component and move it around the page by adjusting its classes. The element will automatically animate its movement:

<.flip_wrap id="my-red-square">
  <div class="absolute w-16 h-16 bg-red-500 rounded-lg shadow-lg">
  </div>
</.flip_wrap>