Transition

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"

export default function Example() {
  return (
    <DatePicker 
      animations={[transition()]} 
    />
  )
}

Customizing Transition#1

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        transition({ duration: 800, from: 35 })
      ]} 
    />
  )
}

Customizing Transition#2

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        transition({
          from: 35,
          transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
        }),
      ]} 
    />
  )
}

Opacity

import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"

export default function Example() {
  return (
    <DatePicker 
      animations={[opacity()]} 
    />
  )
}

Customizing Opacity

import DatePicker from "react-multi-date-picker"
import opacity from "react-element-popper/animations/opacity"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity({ from: 0.1, to: 0.8, duration: 1000 })
      ]} 
    />
  )
}

Size

import DatePicker from "react-multi-date-picker"
import size from "react-element-popper/animations/size"

export default function Example() {
  return (
    <DatePicker 
      animations={[size()]} 
    />
  )
}

Opacity & Transition #1

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity(), 
        transition({ from: 35, duration: 800 })
      ]} 
    />
  )
}

Opacity & Transition #2

import DatePicker from "react-multi-date-picker"
import transition from "react-element-popper/animations/transition"
import opacity from "react-element-popper/animations/opacity"

export default function Example() {
  return (
    <DatePicker 
      animations={[
        opacity(),
        transition({
          from: 40,
          transition: "all 400ms cubic-bezier(0.335, 0.010, 0.030, 1.360)",
        }),
      ]} 
    />
  )
}