{"record":{"id":"6b78a346c7166278","repo":"remotion-dev/remotion","slug":"the-cropleft-cropright-croptop-and-cropbottom-pr","errorCode":null,"errorMessage":"The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout=\"absolute-fill\".","messagePattern":"The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout=\"absolute-fill\"\\.","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"packages/core/src/Sequence.tsx","lineNumber":185,"sourceCode":"\tconst parentSequence = useContext(SequenceContext);\n\tconst cumulatedFrom = parentSequence\n\t\t? parentSequence.cumulatedFrom + parentSequence.relativeFrom\n\t\t: 0;\n\tconst nonce = useNonce();\n\n\tif (layout !== 'absolute-fill' && layout !== 'none') {\n\t\tthrow new TypeError(\n\t\t\t`The layout prop of <Sequence /> expects either \"absolute-fill\" or \"none\", but you passed: ${layout}`,\n\t\t);\n\t}\n\n\tconst cropProps = {cropLeft, cropRight, cropTop, cropBottom};\n\tconst hasCropProp = Object.values(cropProps).some(\n\t\t(value) => value !== undefined,\n\t);\n\n\tif (layout === 'none' && hasCropProp) {\n\t\tthrow new TypeError(\n\t\t\t'The cropLeft, cropRight, cropTop and cropBottom props of <Sequence /> are only supported with layout=\"absolute-fill\".',\n\t\t);\n\t}\n\n\tvalidateSequenceCrop(cropProps);\n\tconst {\n\t\tleft: resolvedCropLeft,\n\t\tright: resolvedCropRight,\n\t\ttop: resolvedCropTop,\n\t\tbottom: resolvedCropBottom,\n\t} = resolveSequenceCrop(cropProps);\n\t// @ts-expect-error\n\tif (layout === 'none' && typeof other.style !== 'undefined') {\n\t\tthrow new TypeError(\n\t\t\t'If layout=\"none\", you may not pass a style. Passed: ' +\n\t\t\t\t// @ts-expect-error\n\t\t\t\tJSON.stringify(other.style),\n\t\t);","sourceCodeStart":167,"sourceCodeEnd":203,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/core/src/Sequence.tsx#L167-L203","documentation":"Thrown by <Sequence> when `layout=\"none\"` is set and any of cropLeft, cropRight, cropTop, or cropBottom is also passed. Cropping is implemented as a CSS clip on the absolutely-positioned wrapper div that layout=\"absolute-fill\" provides; with layout=\"none\" there is no wrapper to clip against, so crop props would be silently ignored. The error prevents that silent no-op.","triggerScenarios":"Passing both `layout=\"none\"` and any crop prop on the same <Sequence>; copy-pasting a cropped <Sequence> and switching layout to 'none' without removing crop props.","commonSituations":"Refactoring a Sequence to embed it in a custom layout (layout=\"none\") while forgetting the crop config; combining sequence composition with manual cropping.","solutions":["Drop the cropLeft/cropRight/cropTop/cropBottom props when using `layout=\"none\"`.","If you need cropping, switch to `layout=\"absolute-fill\"` (or omit layout).","If you need layout=\"none\" and clipping, apply the clip in your own wrapper element via CSS.","Audit shared Sequence config objects that get spread into both cropped and non-cropped usages."],"exampleFix":"// before\n<Sequence layout=\"none\" cropLeft={100} cropRight={100} durationInFrames={30} />\n// after\n<Sequence layout=\"none\" durationInFrames={30} />","handlingStrategy":"validation","validationCode":"const cropProps = {cropLeft, cropRight, cropTop, cropBottom};\nconst hasCrop = Object.values(cropProps).some((v) => v !== undefined);\nif (layout === 'none' && hasCrop) {\n  throw new TypeError('crop props require layout=\"absolute-fill\"');\n}","typeGuard":"const isCropPropFree = (props: Record<string, unknown>): boolean =>\n  ['cropLeft','cropRight','cropTop','cropBottom'].every((k) => props[k] === undefined);","tryCatchPattern":null,"preventionTips":["Don't share crop config objects across layout=\"none\" sequences.","Switch to layout=\"absolute-fill\" when you need cropping.","Apply clipping in your own wrapper when using layout=\"none\".","Filter crop props before spreading into a Sequence."],"tags":["sequence","layout","crop","props","validation"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}