Shared builder types and settings for animations.
Most app code will use the engine and property modules directly.
This module contains shared types and global builder settings.
Use these to constrain a builder function to one specific Engine.
Builder type for Keyframe builders.
f : AnimBuilder ForKeyframe -> AnimBuilder ForKeyframeBuilder type for Sub builders.
f : AnimBuilder ForSub -> AnimBuilder ForSubBuilder type for Transition builders.
f : AnimBuilder ForTransition -> AnimBuilder ForTransitionBuilder type for WAAPI builders.
f : AnimBuilder ForWAAPI -> AnimBuilder ForWAAPIBuilder type for ScrollTimeline builders.
f : AnimBuilder ForScroll -> AnimBuilder ForScrollBuilder type for ViewTimeline builders.
f : AnimBuilder ForView -> AnimBuilder ForViewAll the engines expose their own equivalents of these functions that are engine-specific, these are the engine-agnostic versions. Use these when you are writing builder functions that should work across engines, or when you don't want to commit to a specific engine.
These settings are for Document timeline engines: Keyframe, Sub, Transition, and WAAPI. They make no sense when applied to Scroll and View timelines, and will raise a type error if used in builders for those engines.
Set the global delay for all animations in a Document timeline builder.
introAnim : AnimBuilder { eng | withTiming : () } -> AnimBuilder { eng | withTiming : () }
introAnim =
delay 500
>> fadeInHeader
>> slideInSidebar
>> fadeInContentSet the global duration for all animations in a Document timeline builder.
introAnim : AnimBuilder { eng | withTiming : () } -> AnimBuilder { eng | withTiming : () }
introAnim =
duration 500
>> fadeInHeader
>> slideInSidebar
>> fadeInContentSet the global speed for all animations in a Document timeline builder.
introAnim : AnimBuilder { eng | withTiming : () } -> AnimBuilder { eng | withTiming : () }
introAnim =
speed 300
>> slideDownHeader
>> slideInSidebar
>> slideUpContentSet how many times an animation should repeat.
notificationAttentionLoop : AnimBuilder { eng | withIterations : () } -> AnimBuilder { eng | withIterations : () }
notificationAttentionLoop =
iterations 3
>> pulseBadge
>> nudgeBellIconMake an animation alternate direction on each iteration.
floatingCardLoop : AnimBuilder { eng | withAlternate : () } -> AnimBuilder { eng | withAlternate : () }
floatingCardLoop =
iterations 4
>> alternate
>> liftCard
>> glowCardBorderalternate only has a visible effect when the animation runs more than once,
so calling it when iterations is unset or 1 automatically bumps
iterations to 2. An explicit iterations count (or loopForever) set
before or after alternate is preserved.
Set the global easing function.
heroEntrance : AnimBuilder eng -> AnimBuilder eng
heroEntrance =
easing EaseInOut
>> fadeInHeroTitle
>> slideInHeroArtwork
>> revealPrimaryCtaSet the global spring.
draggableCardSettle : AnimBuilder { eng | withSpring : () } -> AnimBuilder { eng | withSpring : () }
draggableCardSettle =
spring Spring.wobbly
>> settleCardPosition
>> settleCardShadowSet the CSS unit for properties that use length values.
This is useful when you want properties to render in units like rem, cqh or vw, for example, instead of px, the default.
📖 See the property docs and Responsive Animations for more details.
Set the default length unit for all length-bearing properties.
responsivePanelMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsivePanelMotion =
cssUnit Unit.Vw
>> slidePanelIn
>> growPanelHeightSet the default length unit for the X axis.
responsiveDrawerMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsiveDrawerMotion =
cssUnitX Unit.Vw
>> slideDrawerX
>> alignDrawerLabelXSet the default length unit for the Y axis.
responsiveSheetMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsiveSheetMotion =
cssUnitY Unit.Vh
>> slideSheetY
>> alignSheetHeaderYSet the default length unit for the Z axis.
layeredSceneMotion : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
layeredSceneMotion =
cssUnitZ Unit.Px
>> pushSceneBackgroundBack
>> bringFloatingCardForwardSet the default length unit used for width values.
responsiveCardWidth : AnimBuilder { eng | withCssUnit : () } -> AnimBuilder { eng | withCssUnit : () }
responsiveCardWidth =
cssUnitWidth Unit.Vw
>> growCardWidth
>> settleCardSpacingSet the default length unit used for height values.
responsivePanelHeight : AnimBuilder eng -> AnimBuilder eng
responsivePanelHeight =
cssUnitHeight Unit.Vh
>> expandPanelHeight
>> alignPanelHeaderY
Base builder type for animations.
The
engtype parameter is a phantom type used to optionally constrain builder functions to specific engines or capabilities.📖 See Engine Capabilities for details.