Module

Hylograph.Transition.Engine

Package: purescript-hylograph-transitions
Repository: afcondon/purescript-hylograph-transitions

Transition Engine

A tick-driven transition engine for managing animated state changes. This provides a framework-agnostic way to animate values over time, suitable for both Halogen and React integrations.

Key concepts:

TransitionSpec: Defines what to animate (from/to values, duration, easing)
TransitionState: Current state of an in-flight transition
TransitionGroup: Manages multiple coordinated transitions

Design goals:

Pure, deterministic state updates (no side effects)
Works with any tick source (simulation tick, RAF, manual)
Composable with existing Hylograph infrastructure

Usage:

import Hylograph.Transition.Engine as E
import Hylograph.Transition.Easing (EasingType(..))

-- Create a transition spec
let spec = E.transition
      { from: 0.0, to: 100.0 }
      { duration: 500.0, easing: QuadOut }

-- Start the transition
let state = E.start spec

-- In tick handler: advance by delta (milliseconds)
let state' = E.tick 16.67 state

-- Get current value
let current = E.currentValue state'

#TransitionSpec Source

type TransitionSpec a = { config :: TransitionConfig, from :: a, interpolate :: a -> a -> Progress -> a, to :: a }

Specification for a transition Defines the start/end values and how to get there

#TransitionConfig Source

type TransitionConfig = { delay :: Milliseconds, duration :: Milliseconds, easing :: EasingType }

Configuration for a transition

#transition Source

transition :: { from :: Number, to :: Number } -> { duration :: Milliseconds, easing :: EasingType } -> TransitionSpec Number

Create a transition spec for Numbers Uses linear interpolation by default

#transitionWith Source

transitionWith :: forall a. (a -> a -> Progress -> a) -> { from :: a, to :: a } -> TransitionConfig -> TransitionSpec a

Create a transition spec with custom interpolation

#withDelay Source

withDelay :: forall a. Milliseconds -> TransitionSpec a -> TransitionSpec a

Add a delay to a transition spec

#TransitionState Source

type TransitionState a = { current :: a, elapsed :: Milliseconds, spec :: TransitionSpec a }

State of an active transition

#start Source

start :: forall a. TransitionSpec a -> TransitionState a

Start a transition from the beginning

#tick Source

tick :: forall a. Milliseconds -> TransitionState a -> TransitionState a

Advance a transition by a time delta (in milliseconds)

#tickBy Source

tickBy :: forall a. Milliseconds -> TransitionState a -> TransitionState a

Advance a transition by a time delta (in milliseconds) Alias for tick with clearer name

#currentValue Source

currentValue :: forall a. TransitionState a -> a

Get the current interpolated value

#currentProgress Source

currentProgress :: forall a. TransitionState a -> Progress

Get the current progress (0.0 to 1.0)

#isComplete Source

isComplete :: forall a. TransitionState a -> Boolean

Check if the transition is complete

#remaining Source

remaining :: forall a. TransitionState a -> Milliseconds

Get remaining time in milliseconds

#TransitionGroup Source

newtype TransitionGroup

A group of coordinated transitions that tick together Useful for animating multiple properties in sync

#group Source

group :: Array (TransitionSpec Number) -> TransitionGroup

Create a group from multiple transition specs

#groupTick Source

groupTick :: Milliseconds -> TransitionGroup -> TransitionGroup

Tick all transitions in a group

#groupValues Source

groupValues :: TransitionGroup -> Array Number

Get current values from all transitions in group

#groupComplete Source

groupComplete :: TransitionGroup -> Boolean

Check if all transitions in group are complete

#groupRemaining Source

groupRemaining :: TransitionGroup -> Milliseconds

Get maximum remaining time in group

#staggeredGroup Source

staggeredGroup :: Array { from :: Number, to :: Number } -> Milliseconds -> { duration :: Milliseconds, easing :: EasingType } -> TransitionGroup

Create a staggered group from multiple value pairs Each transition animates between its own from/to values with staggered timing

Example:

let specs = staggeredGroup
      [{ from: 0.0, to: 100.0 }, { from: 50.0, to: 150.0 }]
      50.0
      { duration: 300.0, easing: QuadOut }

#staggeredSpecs Source

staggeredSpecs :: Int -> Milliseconds -> TransitionSpec Number -> Array (TransitionSpec Number)

Create staggered specs from a base spec and count Each transition gets an additional delay based on its index

Example: staggeredSpecs 5 50.0 baseSpec -> 5 specs with delays 0ms, 50ms, 100ms, 150ms, 200ms

#IndexedTransition Source

type IndexedTransition = { index :: Int, state :: TransitionState Number }

A transition with its associated index (for tracking which element it belongs to)

#IndexedTransitionGroup Source

newtype IndexedTransitionGroup

Newtype for indexed transition groups

#staggeredGroupIndexed Source

staggeredGroupIndexed :: Array { from :: Number, to :: Number } -> Milliseconds -> { duration :: Milliseconds, easing :: EasingType } -> IndexedTransitionGroup

Create a staggered group that tracks element indices Useful when you need to know which value corresponds to which data element

#indexedGroupTick Source

indexedGroupTick :: Milliseconds -> IndexedTransitionGroup -> IndexedTransitionGroup

Tick all transitions in an indexed group

#indexedValues Source

indexedValues :: IndexedTransitionGroup -> Array { index :: Int, value :: Number }

Get current values with their indices

#indexedGroupComplete Source

indexedGroupComplete :: IndexedTransitionGroup -> Boolean

Check if all transitions in indexed group are complete

#indexedGroupRemaining Source

indexedGroupRemaining :: IndexedTransitionGroup -> Milliseconds

Get maximum remaining time in indexed group

#defaultConfig Source

defaultConfig :: TransitionConfig

Default configuration: 300ms, QuadOut, no delay

#Milliseconds Source

type Milliseconds = Number

Duration in milliseconds

Modules: Hylograph.Transition.Coordinator; Hylograph.Transition.Easing; Hylograph.Transition.Engine; Hylograph.Transition.Interpolate; Hylograph.Transition.RAF; Hylograph.Transition.Tick