Hylograph.Expr.Animation

type AnimatedBuilder datum = { config :: AnimationConfig, fromValue :: Maybe (AnimatedValue datum), name :: String, toValue :: AnimatedValue datum }

Builder for animated attributes

Accumulates the animation specification before converting to Attribute. Use animatedTo to create, config modifiers to adjust, and animated to finalize.

type AnimatedPathBuilder datum = { config :: AnimationConfig, fromValues :: Array (AnimatedValue datum), generator :: Array Number -> String, toValues :: Array (AnimatedValue datum) }

Builder for animated path attributes

Tracks the from/to values for path components and the generator function. Used for animating paths like linkVertical where we interpolate coordinates and regenerate the path string on each frame.

animatedTo :: forall datum. String -> EvalD datum Number -> AnimatedBuilder datum

Create an animated attribute builder targeting a value

The attribute name is required. The target value can be:

• A constant: animatedTo "opacity" (num 1.0)
• A field: animatedTo "cx" (field @"x")
• An expression: animatedTo "cx" (field @"x"timesN20.0)

opacity $ animated $ animatedTo (num 1.0)
  # withDuration 500.0

animatedToIndexed :: forall datum. String -> (datum -> Int -> Number) -> AnimatedBuilder datum

Create an indexed animated attribute builder (uses datum and element index for target)

animated $ animatedToIndexed "cx" (\d i -> d.x + toNumber i * spacing)

animatedFrom :: forall datum. EvalD datum Number -> AnimatedBuilder datum -> AnimatedBuilder datum

Set the starting value for an animation

Without animatedFrom, the animation reads the current DOM value as start. With animatedFrom, the animation uses the specified value.

-- Animate from 0 to 1
opacity $ animated $ animatedFrom (num 0.0) $ animatedTo (num 1.0)

-- Animate from current DOM value to target (no animatedFrom)
opacity $ animated $ animatedTo (field @"targetOpacity")

animatedFromStatic :: forall datum. Number -> AnimatedBuilder datum -> AnimatedBuilder datum

Set a static starting value for an animation

animated $ animatedFromStatic 0.0 $ animatedTo "opacity" (num 1.0)

animatedFromIndexed :: forall datum. (datum -> Int -> Number) -> AnimatedBuilder datum -> AnimatedBuilder datum

Set an indexed starting value for an animation (uses datum and element index)

animated $ animatedFromIndexed (\d i -> d.baseX + toNumber i * 10.0) $ animatedTo "cx" (field @"x")

animatedLinkVertical :: forall datum. { fromSourceX :: EvalD datum Number, fromSourceY :: EvalD datum Number, fromTargetX :: EvalD datum Number, fromTargetY :: EvalD datum Number } -> { toSourceX :: EvalD datum Number, toSourceY :: EvalD datum Number, toTargetX :: EvalD datum Number, toTargetY :: EvalD datum Number } -> AnimatedPathBuilder datum

Create an animated vertical link path

Animates from current positions to new positions, regenerating the cubic bezier path on each frame. Used for tree visualizations.

animatedLinkVertical
  { fromSourceX: field @"sourceX", fromSourceY: field @"sourceY"
  , fromTargetX: field @"targetX", fromTargetY: field @"targetY" }
  { toSourceX: field @"newSourceX", toSourceY: field @"newSourceY"
  , toTargetX: field @"newTargetX", toTargetY: field @"newTargetY" }
  # pathWithDuration 500.0

animatedLinkHorizontal :: forall datum. { fromSourceX :: EvalD datum Number, fromSourceY :: EvalD datum Number, fromTargetX :: EvalD datum Number, fromTargetY :: EvalD datum Number } -> { toSourceX :: EvalD datum Number, toSourceY :: EvalD datum Number, toTargetX :: EvalD datum Number, toTargetY :: EvalD datum Number } -> AnimatedPathBuilder datum

Create an animated horizontal link path

Same as animatedLinkVertical but for horizontal (left-to-right) trees.

pathWithDuration :: forall datum. Number -> AnimatedPathBuilder datum -> AnimatedPathBuilder datum

Set the animation duration for a path animation

pathWithEasing :: forall datum. EasingType -> AnimatedPathBuilder datum -> AnimatedPathBuilder datum

Set the easing function for a path animation

pathWithDelay :: forall datum. Number -> AnimatedPathBuilder datum -> AnimatedPathBuilder datum

Set the delay for a path animation

animatedPathAttr :: forall datum. AnimatedPathBuilder datum -> Attribute datum

Convert an AnimatedPathBuilder to an Attribute

This creates an AnimatedCompound attribute that will interpolate all path coordinates and regenerate the path string on each animation frame.

withDuration :: forall datum. Number -> AnimatedBuilder datum -> AnimatedBuilder datum

Set the animation duration in milliseconds

animated $ animatedTo (num 1.0) # withDuration 500.0

withEasing :: forall datum. EasingType -> AnimatedBuilder datum -> AnimatedBuilder datum

Set the easing function

animated $ animatedTo (num 1.0)
  # withEasing ElasticOut

withDelay :: forall datum. Number -> AnimatedBuilder datum -> AnimatedBuilder datum

Set the delay before animation starts (in milliseconds)

animated $ animatedTo (num 1.0)
  # withDelay 200.0  -- Wait 200ms before starting

withStagger :: forall datum. Number -> AnimatedBuilder datum -> AnimatedBuilder datum

Set staggered delay based on element index

Creates an indexed animation where each element's delay is: baseDelay + (index * staggerDelay)

animated $ animatedTo (num 1.0)
  # withStagger 50.0  -- Each element starts 50ms after the previous

animated :: forall datum. AnimatedBuilder datum -> Attribute datum

Convert an AnimatedBuilder to an Attribute

This is the final step after building the animation specification.

myAttr = animated $ animatedFrom (num 0.0) $ animatedTo (num 1.0)
  # withDuration 500.0
  # withEasing QuadOut

animatedAttr :: forall datum. String -> AnimatedBuilder datum -> Attribute datum

Create an animated attribute with explicit name (alternative syntax)

animatedAttr "opacity" $ animatedFrom (num 0.0) $ animatedTo (num 1.0)

fadeIn :: forall datum. Attribute datum

Fade in from 0 to 1 opacity

enterAttrs = [ fadeIn # withDuration 300.0 ]

fadeOut :: forall datum. Attribute datum

Fade out from current opacity to 0

exitAttrs = [ fadeOut # withDuration 300.0 ]

growFrom :: forall datum. Number -> Attribute datum

Grow from a starting radius to the datum's radius

enterAttrs = [ growFrom 0.0 # withDuration 300.0 ]

shrinkTo :: forall datum. Number -> Attribute datum

Shrink to a target radius (for exit animations)

exitAttrs = [ shrinkTo 0.0 # withDuration 300.0 ]

data EasingType

Enumeration of easing types for animations

Note: This mirrors Hylograph.Transition.Easing.EasingType but is defined here to avoid circular dependencies. The Manager module will convert between them.

Constructors

• Linear
• QuadIn
• QuadOut
• QuadInOut
• CubicIn
• CubicOut
• CubicInOut
• SinIn
• SinOut
• SinInOut
• ExpIn
• ExpOut
• ExpInOut
• CircleIn
• CircleOut
• CircleInOut
• BackIn
• BackOut
• BackInOut
• ElasticIn
• ElasticOut
• ElasticInOut
• BounceIn
• BounceOut
• BounceInOut

Instances

• Eq EasingType
• Ord EasingType
• Show EasingType