Jon: Created page with "Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user. In CSS there are transitions, in Spire an anima..."

2026-07-07T18:13:32Z

Created page with "Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user. In CSS there are transitions, in Spire an anima..."

New page

Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user.

In CSS there are transitions, in Spire an animation is just a value. This means that a property value such as <code>background_color</code> or <code>border_color</code> can be directly set to an animation value to achieve a property value that changes over time.

== Example: Rejected Style for InputBox ==

[[File:TextBox_Rejected.gif|640px|center|Animation of a text input field flashing red to indicate a rejection]]

When the InputBox is in the <code>rejected</code> state, an animation plays. The animation can be defined as follows:

<syntaxhighlight lang="css">background_color: chain(timeout(#FFF1F1, 250ms), linear(#FFF1F1, revert, 300ms))
border_color: chain(timeout(#B71C1C, 550ms), revert)</syntaxhighlight>
In this case the value says:

<blockquote>Chain together two styles, the first style is a value of <code>#FFF1F1</code> that times out after 250ms, the second value is a linear interpolation from <code>#FFF1F1</code> to whatever the style was before (that’s what <code>revert</code> does), over 300ms.
</blockquote>
Border color is styled as:

<blockquote>Chain two styles, the first is the color <code>#B71C1C</code> that expires after 550ms and then reverts to whatever it was previously.
</blockquote>
This is reflected in <code>components.xd</code> for InputBox.

[[File:InputBox_components.png|640px|center|Definition card for Input Box component]]

When the InputBox is <code>rejected</code>, property declarations are made for the <code>background_color</code> and <code>color</code> that are animation values. Whenever the InputBox is put into the <code>rejected</code> state, the animations will play.

Each property value is independent, and there is no necessary connection between the timing used for the animation values for each property.

== Example: Uptick/Downtick Style for DecimalBox ==

[[File:DecimalBox_Uptick_Downtick.gif|640px|center|Animation of a numeric input field flashing red and green alternately to indicate the direction change as its value changes]]

When the DecimalBox uses the uptick/downtick styling, its background color flashes when its value changes, reflecting whether the value increased or decreased.

When the value increases, it is uptick:

<syntaxhighlight lang="css">background_color: linear(#EBFFF0, revert, 550ms)</syntaxhighlight>
When the value decreases, it is downtick:

<syntaxhighlight lang="css">background_color: linear(#FFF1F1, revert, 550ms)</syntaxhighlight>

== Functions ==

Unlike static values, animation values use functions that allow them to change over time. The list of functions that have been used are as follows:

{| class="wikitable"
|-
! Function !! Description
|-
| <code>chain(X, Y, *ARGS)</code> || An animation that applies <code>X</code> until <code>X</code> ends, then applies <code>Y</code> until <code>Y</code> ends, and so on for any additional arguments.
|-
| <code>timeout(X, Y)</code> || Applies <code>X</code> for a period of <code>Y</code>
|-
| <code>linear(X, Y, Z)</code> || Linearly interpolates from <code>X</code> to <code>Y</code> over a period <code>Z</code>. <code>linear = cubic_bezier(0.0, 0.0, 1.0, 1.0)</code>
|-
| <code>ease(X, Y, Z)</code> || Interpolates from <code>X</code> to <code>Y</code> over a period <code>Z</code> using the <code>ease</code> timing function. <code>ease = cubic_bezier(0.25, 0.1, 0.25, 1.0)</code>
|}

Additional functions may be added provided they have a clear use case and are documented.

== Keywords ==

Values within functions may be literal values (e.g. a color value or a time in milliseconds), or they may be a keyword with a defined meaning.

{| class="wikitable"
|-
! Keyword !! Description
|-
| <code>revert</code> || Applies whatever style would have otherwise been applied.
|}

== References ==

# [https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function Easing Functions]
# [https://easings.net/ Easing Functions Cheat Sheet]

Animations - Revision history

Jon: Created page with "Animations in Spire follow a philosophy of enhancing clarity and communication without embellishment or impedance to the user. In CSS there are transitions, in Spire an anima..."