Abstract Optional options: OptionsOptional animationThe AnimationState, this is hydrated by the animation Feature.
Private baseWhen values are removed from all animation props we need to search for a fallback value to animate to. These values are tracked in baseTarget.
Private bindThis can be set by AnimatePresence to force components that mount at the same time as it to mount as if they have initial={false} set.
A set containing references to this VisualElement's children.
A reference to the current underlying Instance, e.g. a HTMLElement or Three.Mesh etc.
The depth of this VisualElement within the overall VisualElement tree.
Private eventsAn object containing a SubscriptionManager for each active event.
Private featuresCleanup functions for active features (hover/tap/exit etc)
Private initialCreate an object of the values we initially animated from (if initial prop present).
Determine what role this visual element should take in the variant tree.
An object containing the latest static values for each of this VisualElement's MotionValues.
Normally, if a component is controlled by a parent's variants, it can rely on that ancestor to trigger animations further down the tree. However, if a component is created after its parent is mounted, the parent won't trigger that mount animation so the child needs to.
TODO: This might be better replaced with a method isParentMounted
Private Readonly optionsThe options used to create this VisualElement. The Options type is defined by the inheriting VisualElement and is passed straight through to the render functions.
A reference to the parent VisualElement (if exists).
Private prevA reference to the previously-provided motion values as returned from scrapeMotionValuesFromProps. We use the keys in here to determine if any motion values need to be removed after props are updated.
Optional prevOptional prevOptional projectionA reference to this VisualElement's projection node, used in layout animations.
Private propAn object containing an unsubscribe function for each prop event subscription. For example, every "Update" event can have multiple subscribers via VisualElement.on(), but only one of those can be defined via the onUpdate prop.
A reference to the latest props provided to the VisualElement's host React component.
Private reducedA reference to the ReducedMotionConfig passed to the VisualElement's host React component.
Private removeOn mount, this will be hydrated with a callback to disconnect this visual element from its parent on unmount.
The current render state of this VisualElement. Defined by inherting VisualElements.
Decides whether this VisualElement should animate in reduced motion mode.
TODO: This is currently set on every individual VisualElement but feels like it could be set globally.
Abstract typeVisualElements are arranged in trees mirroring that of the React tree. Each type of VisualElement has a unique name, to detect when we're crossing type boundaries within that tree.
Private valueA map of every subscription that binds the provided or generated motion values onChange listeners to this visual element.
A map of all motion values attached to this visual element. Motion values are source of truth for any given animated value. A motion value might be provided externally by the component via props.
Optional variantIf this component is part of the variant tree, it should track any children that are also part of the tree. This is essentially a shadow tree to simplify logic around how to stagger over children.
Add a motion value and bind it to this visual element.
Add a child visual element to our set of children.
Abstract buildRun before a React or VisualElement render, builds the latest motion
values into an Instance-specific format. For example, HTMLVisualElement
will use this step to build style and var values.
Abstract getWhen a value has been removed from all animation props we need to pick a target to animate back to. For instance, for HTMLElements we can look in the style prop.
Returns the defined default transition on this component.
Get a motion value for this key. If called with a default value, we'll create one if none exists.
Optional handleOptional preloadedFeatures: FeatureBundleOptional initialLayoutGroupConfig: Framer.SwitchLayoutGroupContextMake a target animatable by Popmotion. For instance, if we're trying to animate width from 100px to 100vw we need to measure 100vw in pixels to determine what we really need to animate to. This is also pluggable to support Framer's custom value types like Color, and CSS variables.
Optional canMutate: booleanAbstract makeTake a target and make it animatable. For instance if provided height: "auto" we need to measure height in pixels and animate that instead.
Abstract measureMeasure the viewport-relative bounding box of the Instance.
If we're trying to animate to a previously unencountered value, we need to check for it in our state and as a last resort read it directly from the instance (which might have performance implications).
Abstract readWhen we first animate to a value we need to animate it from a value. Often this have been specified via the initial prop but it might be that the value needs to be read from the Instance.
Abstract removeWhen a value has been removed from the VisualElement we use this to remove it from the inherting class' unique render state.
Abstract renderApply the built values to the Instance. For example, HTMLElements will have
styles applied via setProperty and the style attribute, whereas SVGElements
will have values applied to attributes.
Optional styleProp: MotionStyleOptional projection: IProjectionNode<unknown>This method takes React props and returns found MotionValues. For example, HTML MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
This isn't an abstract method as it needs calling in the constructor, but it is intended to be one.
Abstract sortUpdate the provided props. Ensure any newly-added motion values are added to our map, old ones removed, and listeners updated.
Generated using TypeDoc
A VisualElement is an imperative abstraction around UI elements such as HTMLElement, SVGElement, Three.Object3D etc.