Skip to content

Commit 8b5da8b

Browse files
committed
fix(iframe-pane): keep Motion's defaults for the values the opacity transition doesn't cover
Motion resolves a per-value transition as `transition[key] ?? transition.default ?? transition`, so `width`, `height`, `scale` and `boxShadow` all resolved to the opacity-only object. That counts as a defined transition, so they lost their defaults and fell back to a generic 300ms `easeOut` tween: the scale spring became a tween and the four-keyframe reload pulse ran in 300ms instead of 800ms. An empty `default` sends them back to Motion's per-value defaults.
1 parent 154271f commit 8b5da8b

1 file changed

Lines changed: 8 additions & 2 deletions

File tree

‎plugins/sanity-plugin-iframe-pane/src/Iframe.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -366,8 +366,14 @@ function Frame(props: FrameProps & {ref?: React.Ref<HTMLIFrameElement>}) {
366366
// Hold while the spinner fades out, then fade in: the choreography of the `[0, 0, 1]`
367367
// opacity keyframes `active` used to have, which a replay would run from 0 again. An
368368
// explicit transition replaces `MotionConfig` for every value, so reduced motion is
369-
// honoured here, for all of them.
370-
transition={prefersReducedMotion ? {duration: 0} : {opacity: {delay: 0.4, duration: 0.4}}}
369+
// honoured here, for all of them. The empty `default` keeps Motion's own per-value
370+
// defaults for the size, shadow and scale animations, which otherwise resolve to the
371+
// opacity transition and lose their timing.
372+
transition={
373+
prefersReducedMotion
374+
? {duration: 0}
375+
: {default: {}, opacity: {delay: 0.4, duration: 0.4}}
376+
}
371377
animate={[
372378
loading ? 'background' : 'active',
373379
reloading ? 'reloading' : 'idle',

0 commit comments

Comments
 (0)