Marc Mintel
2113055a90
Some checks failed
Build & Deploy Mintel Blog / build-and-deploy (push) Failing after 2m19s
115 lines
4.1 KiB
TypeScript
115 lines
4.1 KiB
TypeScript
import React from 'react';
|
|
|
|
// ULTRA-CRITICAL ANIMATION KILLER
|
|
// This mock covers all possible Framer Motion V12 entry points
|
|
// and forces absolute determinism on both HTML and SVG elements.
|
|
|
|
const createMotionComponent = (Tag: string) => {
|
|
const Component = React.forwardRef(({
|
|
children, style, animate, initial, whileHover, whileTap,
|
|
transition, layout, layoutId,
|
|
variants, ...props
|
|
}: any, ref) => {
|
|
|
|
// 1. Resolve State
|
|
// If animate is a string (variant), we try to find it in variants,
|
|
// but since we want to be deterministic, we just ignore variants for now
|
|
// to avoid complex logic. We assume the component state is driven by props.
|
|
|
|
// 2. Resolve Attributes (for SVG)
|
|
// Framer motion allows animating SVG attributes like 'r', 'cx' directly.
|
|
// We must spread 'animate' into the props to snap them.
|
|
const resolvedProps = { ...props };
|
|
if (typeof animate === 'object' && !Array.isArray(animate)) {
|
|
Object.assign(resolvedProps, animate);
|
|
} else if (Array.isArray(animate)) {
|
|
// Handle keyframes by taking the first one
|
|
Object.assign(resolvedProps, animate[0]);
|
|
}
|
|
|
|
// 3. Resolve Style
|
|
const combinedStyle = {
|
|
...style,
|
|
...(typeof initial === 'object' && !Array.isArray(initial) ? initial : {}),
|
|
...(typeof animate === 'object' && !Array.isArray(animate) ? animate : {})
|
|
};
|
|
|
|
// Final cleaning of motion-specific props that shouldn't leak to DOM
|
|
const {
|
|
viewport, transition: _t, onAnimationStart, onAnimationComplete,
|
|
onUpdate, onPan, onPanStart, onPanEnd, onPanSessionStart,
|
|
onTap, onTapStart, onTapCancel, onHoverStart, onHoverEnd,
|
|
...domProps
|
|
} = resolvedProps;
|
|
|
|
return (
|
|
<Tag
|
|
ref={ref}
|
|
{...domProps}
|
|
style={combinedStyle}
|
|
data-framer-captured="true"
|
|
>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
});
|
|
Component.displayName = `motion.${Tag}`;
|
|
return Component;
|
|
};
|
|
|
|
export const motion: any = {
|
|
div: createMotionComponent('div'),
|
|
button: createMotionComponent('button'),
|
|
h1: createMotionComponent('h1'),
|
|
h2: createMotionComponent('h2'),
|
|
h3: createMotionComponent('h3'),
|
|
h4: createMotionComponent('h4'),
|
|
p: createMotionComponent('p'),
|
|
span: createMotionComponent('span'),
|
|
section: createMotionComponent('section'),
|
|
nav: createMotionComponent('nav'),
|
|
svg: createMotionComponent('svg'),
|
|
path: createMotionComponent('path'),
|
|
circle: createMotionComponent('circle'),
|
|
rect: createMotionComponent('rect'),
|
|
line: createMotionComponent('line'),
|
|
polyline: createMotionComponent('polyline'),
|
|
polygon: createMotionComponent('polygon'),
|
|
ellipse: createMotionComponent('ellipse'),
|
|
g: createMotionComponent('g'),
|
|
a: createMotionComponent('a'),
|
|
li: createMotionComponent('li'),
|
|
ul: createMotionComponent('ul'),
|
|
};
|
|
|
|
export const m = motion;
|
|
export const AnimatePresence = ({ children }: any) => <>{children}</>;
|
|
export const MotionConfig = ({ children }: any) => <>{children}</>;
|
|
export const LayoutGroup = ({ children }: any) => <>{children}</>;
|
|
export const LazyMotion = ({ children }: any) => <>{children}</>;
|
|
|
|
export const useAnimation = () => ({
|
|
start: () => Promise.resolve(),
|
|
set: () => { },
|
|
stop: () => { },
|
|
mount: () => { },
|
|
});
|
|
|
|
export const useInView = () => true;
|
|
export const useScroll = () => ({
|
|
scrollYProgress: { get: () => 0, onChange: () => () => { }, getVelocity: () => 0 },
|
|
scrollY: { get: () => 0, onChange: () => () => { }, getVelocity: () => 0 }
|
|
});
|
|
|
|
export const useTransform = (value: any, from: any[], to: any[]) => to[0];
|
|
export const useSpring = (value: any) => value;
|
|
export const useCycle = (...args: any[]) => [args[0], () => { }];
|
|
export const useIsPresent = () => true;
|
|
export const useReducedMotion = () => true;
|
|
export const useAnimationControls = useAnimation;
|
|
export const usePresence = () => [true, null];
|
|
|
|
export const isValidMotionProp = () => true;
|
|
|
|
export default motion;
|