: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
const valueTransition = getValueTransition(transition, name) || {};
* Most transition values are currently completely overwritten by value-specific
* transitions. In the future it'd be nicer to blend these transitions. But for now
* delay actually does inherit from the root transition if not value-specific.
const delay = valueTransition.delay || transition.delay || 0;
* Elapsed isn't a public transition option but can be passed through from
* optimized appear effects in milliseconds.
let { elapsed = 0 } = transition;
elapsed = elapsed - secondsToMilliseconds(delay);
keyframes: Array.isArray(target) ? target : [null, target],
velocity: value.getVelocity(),
valueTransition.onUpdate && valueTransition.onUpdate(v);
valueTransition.onComplete && valueTransition.onComplete();
element: isHandoff ? undefined : element,
* If there's no transition defined for this value, we can generate
* unqiue transition settings for this value.
if (!isTransitionDefined(valueTransition)) {
...getDefaultTransition(name, options),
* Both WAAPI and our internal animation functions use durations
* as defined by milliseconds, while our external API defines them
options.duration = secondsToMilliseconds(options.duration);
if (options.repeatDelay) {
options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
if (options.from !== undefined) {
options.keyframes[0] = options.from;
if (options.type === false ||
(options.duration === 0 && !options.repeatDelay)) {
if (options.delay === 0) {
if (instantAnimationState.current ||
MotionGlobalConfig.skipAnimations) {
* If we can or must skip creating the animation, and apply only
* the final keyframe, do so. We also check once keyframes are resolved but
* this early check prevents the need to create an animation at all.
if (shouldSkip && !isHandoff && value.get() !== undefined) {
const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
if (finalKeyframe !== undefined) {
frame_frame.update(() => {
options.onUpdate(finalKeyframe);
* Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
* WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
if (!isHandoff && AcceleratedAnimation.supports(options)) {
return new AcceleratedAnimation(options);
return new MainThreadAnimation(options);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/use-will-change/is.mjs
function isWillChangeMotionValue(value) {
return Boolean(isMotionValue(value) && value.add);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/array.mjs
function addUniqueItem(arr, item) {
if (arr.indexOf(item) === -1)
function removeItem(arr, item) {
const index = arr.indexOf(item);
// Adapted from array-move
function moveItem([...arr], fromIndex, toIndex) {
const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;
if (startIndex >= 0 && startIndex < arr.length) {
const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;
const [item] = arr.splice(fromIndex, 1);
arr.splice(endIndex, 0, item);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/subscription-manager.mjs
class SubscriptionManager {
addUniqueItem(this.subscriptions, handler);
return () => removeItem(this.subscriptions, handler);
const numSubscriptions = this.subscriptions.length;
if (numSubscriptions === 1) {
* If there's only a single handler we can just call it without invoking a loop.
this.subscriptions[0](a, b, c);
for (let i = 0; i < numSubscriptions; i++) {
* Check whether the handler exists before firing as it's possible
* the subscriptions were modified during this loop running.
const handler = this.subscriptions[i];
handler && handler(a, b, c);
return this.subscriptions.length;
this.subscriptions.length = 0;
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/index.mjs
* Maximum time between the value of two frames, beyond which we
* assume the velocity has since been 0.
const MAX_VELOCITY_DELTA = 30;
const isFloat = (value) => {
return !isNaN(parseFloat(value));
const collectMotionValues = {
* `MotionValue` is used to track the state and velocity of motion values.
* @param init - The initiating value
* @param config - Optional configuration options
* - `transformer`: A function to transform incoming values with.
constructor(init, options = {}) {
* This will be replaced by the build step with the latest version number.
* When MotionValues are provided to motion components, warn if versions are mixed.
* Tracks whether this value can output a velocity. Currently this is only true
* if the value is numerical, but we might be able to widen the scope here and support
this.canTrackVelocity = null;
* An object containing a SubscriptionManager for each active event.
this.updateAndNotify = (v, render = true) => {
const currentTime = time.now();
* If we're updating the value during another frame or eventloop
* than the previous frame, then the we set the previous frame value
if (this.updatedAt !== currentTime) {
this.setPrevFrameValue();
this.prev = this.current;
// Update update subscribers
if (this.current !== this.prev && this.events.change) {
this.events.change.notify(this.current);
// Update render subscribers
if (render && this.events.renderRequest) {
this.events.renderRequest.notify(this.current);
this.hasAnimated = false;
this.owner = options.owner;
this.updatedAt = time.now();
if (this.canTrackVelocity === null && current !== undefined) {
this.canTrackVelocity = isFloat(this.current);
setPrevFrameValue(prevFrameValue = this.current) {
this.prevFrameValue = prevFrameValue;
this.prevUpdatedAt = this.updatedAt;
* Adds a function that will be notified when the `MotionValue` is updated.
* It returns a function that, when called, will cancel the subscription.
* When calling `onChange` inside a React component, it should be wrapped with the
* `useEffect` hook. As it returns an unsubscribe function, this should be returned
* from the `useEffect` function to ensure you don't add duplicate subscribers..
* export const MyComponent = () => {
* const x = useMotionValue(0)
* const y = useMotionValue(0)
* const opacity = useMotionValue(1)
* function updateOpacity() {
* const maxXY = Math.max(x.get(), y.get())
* const newOpacity = transform(maxXY, [0, 100], [1, 0])
* opacity.set(newOpacity)
* const unsubscribeX = x.on("change", updateOpacity)
* const unsubscribeY = y.on("change", updateOpacity)
* return <motion.div style={{ x }} />
* @param subscriber - A function that receives the latest value.
* @returns A function that, when called, will cancel this subscription.
return this.on("change", subscription);
on(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = new SubscriptionManager();
const unsubscribe = this.events[eventName].add(callback);
if (eventName === "change") {
* If we have no more change listeners by the start
* of the next frame, stop active animations.
if (!this.events.change.getSize()) {
for (const eventManagers in this.events) {
this.events[eventManagers].clear();
* Attaches a passive effect to the `MotionValue`.
attach(passiveEffect, stopPassiveEffect) {
this.passiveEffect = passiveEffect;
this.stopPassiveEffect = stopPassiveEffect;
* Sets the state of the `MotionValue`.
* const x = useMotionValue(0)
* @param latest - Latest value to set.
* @param render - Whether to notify render subscribers. Defaults to `true`
if (!render || !this.passiveEffect) {
this.updateAndNotify(v, render);
this.passiveEffect(v, this.updateAndNotify);
setWithVelocity(prev, current, delta) {
this.prevFrameValue = prev;
this.prevUpdatedAt = this.updatedAt - delta;
* Set the state of the `MotionValue`, stopping any active animations,
* effects, and resets velocity to `0`.
jump(v, endAnimation = true) {
this.prevUpdatedAt = this.prevFrameValue = undefined;
endAnimation && this.stop();
if (this.stopPassiveEffect)
this.stopPassiveEffect();
* Returns the latest state of `MotionValue`
* @returns - The latest state of `MotionValue`
if (collectMotionValues.current) {
collectMotionValues.current.push(this);
* Returns the latest velocity of `MotionValue`
* @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
const currentTime = time.now();
if (!this.canTrackVelocity ||
this.prevFrameValue === undefined ||
currentTime - this.updatedAt > MAX_VELOCITY_DELTA) {
const delta = Math.min(this.updatedAt - this.prevUpdatedAt, MAX_VELOCITY_DELTA);
// Casts because of parseFloat's poor typing
return velocityPerSecond(parseFloat(this.current) -
parseFloat(this.prevFrameValue), delta);
* Registers a new animation to control this `MotionValue`. Only one
* animation can drive a `MotionValue` at one time.
* @param animation - A function that starts the provided animation
return new Promise((resolve) => {
this.animation = startAnimation(resolve);
if (this.events.animationStart) {
this.events.animationStart.notify();
if (this.events.animationComplete) {
this.events.animationComplete.notify();
* Stop the currently active animation.
if (this.events.animationCancel) {
this.events.animationCancel.notify();
* Returns `true` if this value is currently animating.
* Destroy and clean up subscribers to this `MotionValue`.
* The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
* handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
* created a `MotionValue` via the `motionValue` function.
if (this.stopPassiveEffect) {
this.stopPassiveEffect();
function motionValue(init, options) {
return new MotionValue(init, options);