Motion

Built-in presets

Preview Code

import { Slide } from '@react-slides/core'
import { MotionFragment, fadeIn, slideUp, slideLeft, scaleIn, blur } 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={slideLeft}><p>slideLeft</p></MotionFragment>
      <MotionFragment animation={scaleIn}><p>scaleIn</p></MotionFragment>
      <MotionFragment animation={blur}><p>blur</p></MotionFragment>
      </Slide>
    </>
  )
}

export default slides

Custom preset

import { Slide } from '@react-slides/core'
import { createMotionPreset, MotionFragment } from '@react-slides/plugin-motion'

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

const slides = () => {
  return (
    <>
      <Slide>
        <MotionFragment animation={flipIn}>
          <h2>3D entrance</h2>
        </MotionFragment>
      </Slide>
    </>
  )
}

export default slides

Separate enter / exit

Pass a MotionConfig object instead of a single preset.

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

const slides = () => {
  return (
    <>
      <Slide>
        <MotionFragment
          exit={3}
          animation={{ enter: slideUp, exit: blur, stagger: 0.1 }}
        >
          <p>Slides up on enter, blurs on exit</p>
        </MotionFragment>
      </Slide>
    </>
  )
}

export default slides