<MotionFragment>

Drop-in replacement for core’s <Fragment> with Framer Motion animations. Defaults to fadeIn.

Preview Code

import { Slide, Fragment } from '@react-slides/core'
import { MotionFragment, fadeIn, slideUp, scaleIn } from '@react-slides/plugin-motion'

const slides = () => {
  return (
    <>
      <Slide>
        <MotionFragment animation={fadeIn}><p>fadeIn</p></MotionFragment>
        <MotionFragment animation={slideUp}><p>slideUp</p></MotionFragment>
        <MotionFragment animation={scaleIn}><p>scaleIn</p></MotionFragment>
      </Slide>
    </>
  )
}

export default slides

Inherits all FragmentProps, plus:

Name	Type	Default	Description
animation?	AnimationProp	fadeIn	A MotionPreset or a MotionConfig with separate enter/exit/stagger.

In overview mode, animations are skipped and fragments render in their final visible state.

Presets

Preset	Effect
fadeIn	Opacity 0 → 1, 0.4s.
fadeOut	Opacity 1 → 0.
slideUp	Y +30 → 0, spring.
slideDown	Y -30 → 0, spring.
slideLeft	X +50 → 0, spring.
slideRight	X -50 → 0, spring.
scaleIn	Scale 0.8 → 1, spring.
scaleOut	Scale 1 → 0.8.
blur	Blur 10px → 0.
typewriter	Alias of fadeIn (placeholder).

Region presets: regionFadeIn, regionScaleIn, regionSlideUp.

createMotionPreset(preset)

import { createMotionPreset } from '@react-slides/plugin-motion'

export const flipIn = createMotionPreset({
  hidden: { opacity: 0, rotateY: 90 },
  visible: { opacity: 1, rotateY: 0 },
  transition: { duration: 0.5 },
})