Hylograph.Internal.Transition.Types

type TransitionConfig = { delay :: Maybe Milliseconds, duration :: Milliseconds, easing :: Maybe Easing, staggerDelay :: Maybe Number }

Configuration for a transition

Specifies timing and easing for animated attribute changes. All times are in milliseconds.

For staggered transitions, use staggerDelay to add incremental delay per element: element i gets delay = baseDelay + (i * staggerDelay)

Example:

config = transition (Milliseconds 1500.0)
configWithDelay = transitionWith
  { duration: Milliseconds 1500.0
  , delay: Just (Milliseconds 500.0)
  , staggerDelay: Nothing
  , easing: Just Linear
  }
staggeredConfig = transitionWith
  { duration: Milliseconds 600.0
  , delay: Nothing
  , staggerDelay: Just 100.0  -- 100ms between each element
  , easing: Nothing
  }

data Easing

Easing functions control the rate of change during transitions

Based on D3's easing functions: https://d3js.org/d3-ease For more complex easing, use purescript-easings library

Note: We could integrate with purescript-easings in the future, but starting simple with D3's built-in easings.

Constructors

• Linear
• Cubic
• CubicIn
• CubicOut
• CubicInOut
• Quad
• QuadIn
• QuadOut
• QuadInOut
• Sin
• SinIn
• SinOut
• SinInOut
• Exp
• ExpIn
• ExpOut
• ExpInOut
• Circle
• CircleIn
• CircleOut
• CircleInOut
• Elastic
• ElasticIn
• ElasticOut
• ElasticInOut
• Back
• BackIn
• BackOut
• BackInOut
• Bounce
• BounceIn
• BounceOut
• BounceInOut

Instances

• Eq Easing
• Ord Easing
• Show Easing

transition :: Milliseconds -> TransitionConfig

Create a simple transition with just duration

Uses default easing (Cubic) and no delay.

Example:

config = transition (Milliseconds 1000.0)

staggeredTransition :: Milliseconds -> Number -> TransitionConfig

Create a staggered transition where each element delays incrementally

Element i gets delay = i * staggerMs

Example:

config = staggeredTransition (Milliseconds 600.0) 100.0
-- Element 0: 0ms delay, Element 1: 100ms delay, Element 2: 200ms delay...

transitionWith :: TransitionConfig -> TransitionConfig

Create a transition with full configuration

Example:

config = transitionWith
  { duration: Milliseconds 1500.0
  , delay: Just (Milliseconds 500.0)
  , easing: Just ElasticOut
  }

defaultTransition :: TransitionConfig

Default transition configuration

250ms duration, no delay, cubic easing (D3 default)