Value
new Value(initial: number)A mutable number with setValue, setOffset, flattenOffset, extractOffset, stopAnimation and resetAnimation.
API reference
Every export of @kkwaenggwari/animated, with its signature and the guide that explains it.
Values and graphs
ValueXY
new ValueXY({ x?, y? })Paired x and y values with the same operations, plus getLayout and getTranslateTransform.
createValue
createValue(initial: number | Record<string, number>)Create a number or a named numeric record outside React. Creation is inert.
Guide: Values and styleAnimatedNode
node.getValue() · node.interpolate(config) · node.addListener(fn)The read-only base of every value and graph: getValue, interpolate and listeners.
AnimatedInterpolation
node.interpolate({ inputRange, outputRange, easing?, extrapolate? })A live mapping from input to output ranges, with easing and extend, clamp or identity extrapolation.
AnimatedComputed
new AnimatedComputed(inputs, (...values) => result);A pure read-only computation over one or more inputs. Outputs that use it run in JavaScript.
Guide: Values and styleinterpolateFn
interpolateFn({ value, inputRange, outputRange });Evaluate an interpolation once for a plain number.
Guide: Values and styleadd
add(...inputs);The sum of numbers and values.
Guide: Values and stylesubtract
subtract(a, b);The difference of two inputs.
Guide: Values and stylemultiply
multiply(...inputs);The product of numbers and values.
Guide: Values and styledivide
divide(a, b);The quotient of two inputs.
Guide: Values and stylemodulo
modulo(a, b);A wrapped value, for example an endless rotation.
Guide: Values and stylediffClamp
diffClamp(input, min, max);Follows the input's changes but stays within a range; useful for headers that hide on scroll.
Guide: Values and styleReact hooks
useAnimatedValue
useAnimatedValue(initial, { scope?, id? }?)Own a number or numeric record for the component's lifetime. In style, it is a CSS variable.
useAnimated
useAnimated(initial, value => { … }, deps?, { autoStart?, onComplete?, scope? }?)Own a value plus every controller, input and output declared in its factory. Starts, restarts on dependency changes and cleans up.
Guide: Values and styleuseAnimatedValueXY
useAnimatedValueXY({ x?, y? }?, options?)Own a complete two-dimensional value.
Guide: Values and styleuseAnimatedCSS
useAnimatedCSS(node, { scope?, id? }?): stringGive a derived node that is not a calc() expression its own CSS variable, with a component lifetime.
useAnimatedListener
useAnimatedListener(node, ({ value }) => void)Call a function on every change of a node or ValueXY; removed on unmount.
useAnimatedPresence
useAnimatedPresence(visible, { enter, exit, onExitComplete? })Return { mounted, animatedValue } for hook-based enter and exit.
AnimatedProvider
<AnimatedProvider scope={ref}>…</AnimatedProvider>;Set a default CSS variable scope for the hook values below it.
Guide: Values and styleflushAnimatedUpdates
flushAnimatedUpdates();Apply pending output synchronously, for deterministic tests.
Guide: Values and styleDrivers, composition and timelines
timing
timing(value, { toValue, duration?, delay?, easing? })Move a value along an easing curve for a fixed duration.
Guide: Timing, springs and compositionspring
spring(value, { toValue, stiffness?, damping?, mass?, velocity? })Move a value with spring physics, keeping the velocity of an interrupted motion.
Guide: Timing, springs and compositiondecay
decay(value, { velocity, deceleration? })Start with a velocity and slow down.
Guide: Timing, springs and compositiondelay
delay(ms);A controller that only waits.
Guide: Timing, springs and compositionsequence
sequence([a, b, c]);Run controllers one after another.
Guide: Timing, springs and compositionparallel
parallel([a, b], { stopTogether? }?)Run controllers together.
Guide: Timing, springs and compositionstagger
stagger(ms, [a, b, c]);Start controllers one after another with a fixed interval.
Guide: Timing, springs and compositionloop
loop(animation, { iterations?, resetBeforeIteration? }?)Repeat a controller a number of times or forever.
Guide: Timing, springs and compositionkeyframes
keyframes(value, [0, 1, 0.5], { duration?, times?, repeat? }?)Drive a value through several numbers, with optional times and repeats.
Guide: Timing, springs and compositionEasing
Easing.inOut(Easing.cubic) · Easing.bezier(x1, y1, x2, y2)Curves matching React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier and in/out helpers.
Guide: Timing, springs and compositioncreateTimeline
createTimeline({ track: [a, b] }, { duration?, repeat? }?)A seekable clock with named tracks, outside React.
Guide: Timing, springs and compositionuseTimeline
useTimeline(tracks, { duration?, repeat?, autoStart? }?, deps?)A component-owned timeline whose tracks work directly in ordinary style.
Guide: Timing, springs and compositionComponents and layout
Animated
<Animated.div seed pose tempo respond depart move />;The namespace of HTML and SVG hosts such as Animated.div, plus the core functions under React Native names.
Animated.wrap
Animated.wrap(Component) · Animated.createAnimatedComponent(Component)Make a ref-forwarding component accept the Animated host props.
Guide: Animated componentsAnimated.Scope
<Animated.Scope pose? tempo? animation?>…</Animated.Scope>Share a pose name, tempo and animation defaults with the Animated elements inside.
Guide: Animated componentsAnimated.Keep
<Animated.Keep seed? wait? onDeparted?>…</Animated.Keep>Keep keyed children mounted until their departure finishes.
Guide: Animated componentsAnimated.Scene
<Animated.Scene tempo?>…</Animated.Scene>Animate layout changes of move elements and connect elements with the same identity.
createLayoutScene
createLayoutScene(options?) → { attach, capture, commit, dispose }The same capture and commit layout coordination for other renderers.
Guide: Animated componentsuseReorder
useReorder(items, onChange, { key?, axis?, tempo? }?)Pointer and keyboard reordering of a controlled list along one axis.
Guide: Animated componentsInput and connections
input
input(targetRef, adapter, onEvent?)Attach an input adapter to an element as an owned controller.
Guide: Input and gesturesfollow
follow(target, source, { stiffness?, damping?, mass? }?)Make one value spring after another.
Guide: Input and gesturesconnect
connect(node, (value) => write(value));Send every change of a node to a function.
Guide: Input and gesturesevent
Animated.event([{ nativeEvent: { contentOffset: { y } } }]);Map nested event data into values, as in React Native.
Guide: Input and gesturesdragInput
dragInput({ x?, y?, axis?, bounds?, elastic?, momentum?, settle? })Pointer and keyboard dragging with bounds, elastic edges, momentum and settle.
Guide: Input and gesturespinchInput
pinchInput({ scale?, rotation?, minScale?, maxScale? })Scale and rotation from a two-pointer gesture.
Guide: Input and gesturesmoveInput
moveInput({ x?, y?, relative?, reset? })Pointer coordinates, optionally relative to the element's center.
Guide: Input and gesturesscrollInput
scrollInput({ x?, y?, progressX?, progressY?, target?, through? })Scroll position and progress of an element, the page, or an element passing through the viewport.
Guide: Input and gestureswheelInput
wheelInput({ x?, y? })Wheel deltas.
Guide: Input and gesturesviewportInput
viewportInput({ root?, margin?, amount?, once? })Whether the element is in the viewport.
Guide: Input and gesturesmediaInput
mediaInput('(min-width: 768px)');Whether a media query matches.
Guide: Input and gestureslongPressInput
longPressInput({ delay?, threshold? })A held pointer after a delay and within a movement threshold.
Guide: Input and gesturesswipeInput
swipeInput({ direction?: 'left' | 'right' | 'up' | 'down' | 'any' })Swipe direction, distance and velocity.
Guide: Input and gesturesOutput and diagnostics
bind
bind(element, style) → { update, inspect, dispose }Bind Animated styles to an element outside React; returns update, inspect and dispose.
inspect
inspect(element) → [{ property, driver, reason }]The playback path and fallback reason of each animated property of an element.
Guide: Performance and playbackoutput
output(targetRef, { style?, attributes?, properties?, text? })Own a style, attribute, text or property output inside useAnimated.
bindOutput
bindOutput(target, mapping) → { flush, dispose }Attach an output mapping immediately; returns flush and dispose.