MithrilUI.Animations (Mithril UI v0.1.2)

Predefined animation presets for use with Phoenix.LiveView.JS commands.

These animations work with Tailwind CSS transition utilities and are designed to be used with JS.show/2 and JS.hide/2 transition options.

Usage

import MithrilUI.Animations

JS.show(transition: modal_enter())
JS.hide(transition: modal_leave())

Animation Types

Modal - Scale + fade for dialog overlays
Dropdown - Fade + slide for menus
Toast - Slide from edge for notifications
Drawer - Full slide for side panels
Fade - Simple opacity transitions
Backdrop - Overlay fade animations
Accordion - Expand/collapse for sections

Accessibility

All animations respect the user's prefers-reduced-motion preference when combined with the provided CSS (see assets/css/mithril_ui/animations.css).

Summary

Functions

accordion_collapse()

Accordion collapse animation.

accordion_expand()

Accordion expand animation.

alert_enter()

Alert enter animation - slide down + fade.

alert_leave()

Alert leave animation.

backdrop_enter()

Backdrop fade in animation.

backdrop_leave()

Backdrop fade out animation.

drawer_enter(atom)

Drawer enter animation - slide from specified side.

drawer_leave(atom)

Drawer leave animation - slide to specified side.

dropdown_enter()

Dropdown enter animation - fade + slide down.

dropdown_leave()

Dropdown leave animation.

fade_in()

Simple fade in animation.

fade_out()

Simple fade out animation.

modal_enter()

Modal enter animation - fade + scale.

modal_leave()

Modal leave animation - fade + scale.

toast_enter()

Toast enter animation - slide in from right.

toast_leave()

Toast leave animation.

tooltip_enter()

Tooltip enter animation - fade + slight scale.

tooltip_leave()

Tooltip leave animation.

Functions

accordion_collapse()

@spec accordion_collapse() :: {String.t(), String.t(), String.t()}

Accordion collapse animation.

accordion_expand()

@spec accordion_expand() :: {String.t(), String.t(), String.t()}

Accordion expand animation.

alert_enter()

@spec alert_enter() :: {String.t(), String.t(), String.t()}

Alert enter animation - slide down + fade.

alert_leave()

@spec alert_leave() :: {String.t(), String.t(), String.t()}

Alert leave animation.

backdrop_enter()

@spec backdrop_enter() :: {String.t(), String.t(), String.t()}

Backdrop fade in animation.

backdrop_leave()

@spec backdrop_leave() :: {String.t(), String.t(), String.t()}

Backdrop fade out animation.

drawer_enter(atom)

@spec drawer_enter(:left | :right) :: {String.t(), String.t(), String.t()}

Drawer enter animation - slide from specified side.

Parameters

side - :left or :right

Example

JS.show(transition: drawer_enter(:left))

drawer_leave(atom)

@spec drawer_leave(:left | :right) :: {String.t(), String.t(), String.t()}

Drawer leave animation - slide to specified side.

Parameters

side - :left or :right

dropdown_enter()

@spec dropdown_enter() :: {String.t(), String.t(), String.t()}

Dropdown enter animation - fade + slide down.

dropdown_leave()

@spec dropdown_leave() :: {String.t(), String.t(), String.t()}

Dropdown leave animation.

fade_in()

@spec fade_in() :: {String.t(), String.t(), String.t()}

Simple fade in animation.

fade_out()

@spec fade_out() :: {String.t(), String.t(), String.t()}

Simple fade out animation.

modal_enter()

@spec modal_enter() :: {String.t(), String.t(), String.t()}

Modal enter animation - fade + scale.

Example

<div
  id="my-modal"
  phx-mounted={JS.show(transition: modal_enter())}
>
  Modal content
</div>

modal_leave()

@spec modal_leave() :: {String.t(), String.t(), String.t()}

Modal leave animation - fade + scale.

Example

JS.hide(transition: modal_leave())

toast_enter()

@spec toast_enter() :: {String.t(), String.t(), String.t()}

Toast enter animation - slide in from right.

toast_leave()

@spec toast_leave() :: {String.t(), String.t(), String.t()}

Toast leave animation.