Has anyone successfully animated month transitions in React Day Picker?

[manavm1990]

I would like to add smooth transition animations when navigating between months. I've tried several approaches, particularly with Motion's layout animations, but haven't been able to get it working properly.

// What I've tried:
<AnimatePresence mode="wait">
  <motion.div
    key={`${month.getMonth()}-${month.getFullYear()}`}
    initial={{ opacity: 0, x: 50 }}
    animate={{ opacity: 1, x: 0 }}
    exit={{ opacity: 0, x: -50 }}
    transition={{ duration: 0.3 }}
  >
    <DayPickerPrimitive
      month={month}
      onMonthChange={setMonth}
      // other props...
    />
  </motion.div>
</AnimatePresence>

I've also tried using Motion's layout prop, which would be perfect for this case, but it doesn't seem to work with how the calendar months are constructed/updated:

<motion.div layout>
  <DayPickerPrimitive
    month={month}
    onMonthChange={setMonth}
    // other props...
  />
</motion.div>

Has anyone successfully implemented smooth month transition animations with React Day Picker? If so, I'd love to know your approach. Or does the current component architecture make this fundamentally difficult?

I'd be happy to work on a PR to improve animation support if others are interested in this feature as well.

[rodgobbi]

Hi @manavm1990

I have good news for your use case, we are close to having animations supported natively by the DayPicker with #2684.

I can message you again in this thread when it's merged so you can try it out.
It would be great if you tried it once it's ready and provided feedback if it worked for you out of the box for your use case.

[rodgobbi]

@manavm1990
We just released month transition animations with version 9.6.1. 🎉
Feel free to try it out and leave your feedback in DayPicker Discussions, there's a pinned discussion just for it.

[manavm1990]

First, thanks for the work on this. Sounds promising. However, with this change:

diff --git a/packages/ui/src/inputs/date-picker/day-picker.tsx b/packages/ui/src/inputs/date-picker/day-picker.tsx
index 418188380..441dc8666 100644
--- a/packages/ui/src/inputs/date-picker/day-picker.tsx
+++ b/packages/ui/src/inputs/date-picker/day-picker.tsx
@@ -26,6 +26,7 @@ export function DayPicker({
 
   return (
     <DayPickerPrimitive
+      animate
       classNames={{
         root: "bg-white/85 p-5 shadow-xl mt-px rounded-lg relative left-10",
         button_previous:

The calendar months seem to be garbled and maybe 🤔 are stacking on top of each other???

This was switching from April to May...

[rodgobbi]

@manavm1990 Could you share a codesandbox with how you are customizing the DayPicker for your use case?
You may need to tweak to adapt to your use case.
You can fork from https://codesandbox.io/p/sandbox/m2j7fr

[manavm1990]

Hope this helps!

The Sandbox was glitching on the save? So, here's all of the pasted code for reference too:

import "./styles.css";
import { DayPicker as DayPickerPrimitive } from "react-day-picker";
import "react-day-picker/style.css";
import { type Dispatch, type SetStateAction } from "react";

export interface DayPickerProps {
  date: Date;
  disabledAfter?: Date;
  disabledBefore?: Date;
  disabledDates?: string[];
  handleDayClick: (day: Date) => void;
  setDate: Dispatch<SetStateAction<Date>>;
}

export function DayPicker({
  date,
  disabledAfter,
  disabledBefore = new Date(),
  disabledDates = [],
  handleDayClick,
  setDate,
}: DayPickerProps) {
  const disabledDays = disabledDates.map((disabledDate: string) => {
    const dateObj = new Date(disabledDate);
    const timezoneOffset = dateObj.getTimezoneOffset() * 60000;
    return new Date(dateObj.getTime() + timezoneOffset);
  });

  return (
    <DayPickerPrimitive

    // Standard Tailwind classes
      classNames={{
        root: "bg-white/85 p-5 shadow-xl mt-px rounded-lg relative left-10",
        button_previous:
          "disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent",
        day_button:
          "text-lg disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-transparent bg-success text-white disabled:text-dark-gray size-11 hover:bg-green-500 hover:dark:text-white",
        month_caption: "font-semibold my-2.5",
        month_grid: "border-collapse",
        nav: "absolute right-5",
        selected: "border-dark-gray border-2",
      }}
      defaultMonth={date}
      disabled={[
        ...disabledDays,
        { before: disabledBefore, after: disabledAfter },
      ]}
      /*
       * No need to go back in time!
       * https://daypicker.dev/upgrading#example
       */
      startMonth={new Date()}
      hidden={[{ before: new Date() }]}
      mode="single"
      onDayClick={handleDayClick}
      onSelect={(selectedDate: Date) => {
        setDate(selectedDate);
      }}
      selected={date}
      required
    />
  );
}