View Source LiveFlip (LiveFlip v0.2.0)
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
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 to300
.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 tofalse
.class
(:list
) - List of classes for the flip container tag. If any classes are passed, the container itself will be the flipped element. When no classes are passed, the first child of the wrapped element will be the flipped element. Defaults to[]
.- 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>