Why is my animation not playing after migrating from framer-motion to motion?

[manuelpoelzl]

Hi,

I have migrated from “framer-motion”: “^11.3.31” to “motion”: “^12.0.6” . Since this update, however, none of my animations are being played.

I also don't get any error messages in the browser console.

What it should look like:

Bildschirmaufnahme.2025-02-01.160348.mp4

Instead of the animation starting, it stays at the intial value, which basically means the individual items stay hidden.

my component:

import React, {FC, useState, useEffect, ReactNode} from "react";
import {Card} from "primereact/card";
import {useTranslation} from "react-i18next";

import {AxiosAuthenticated} from "../../../Utils/AxiosInstanceAuthenticated";
import {GeneralHelper} from "../../../Classes/GeneralHelper";
import {HttpStatusCode} from "axios";
import {ReturnStatus} from "../../../Utils/ReturnStatus";
import {LucideAmphora, LucideMapPin, LucideShare2, LucideUsers} from "lucide-react";
import {useUser} from "@clerk/clerk-react";
import {Avatar} from "primereact/avatar";
import {motion, Variants} from "motion/react";

export const UserSummaryCard: FC<{}> = props => {

    //#region Constants
    const {t} = useTranslation();
    const {user} = useUser();
    const subItemClasses = "mr-5 flex align-items-center mt-3";
    const MotionCard = motion.create(Card);
    const cardVariant: Variants = {
        initial: {},
        animation: {
            transition: {
                delayChildren: 1,
                staggerChildren: 0.2
            }
        }
    };
    const subHeaderVariant: Variants = {
        initial: {
            opacity: 0
        },
        animation: {
            opacity: 1
        }

    };

    //#endregion


    //#region States
    const [simpleStats, setSimpleStats] = useState<Nullable<Record<string, any>>>(null);
    //#endregion


    //#region Hooks

    useEffect(() => {

        GetSimpleStats();

    }, []);

    //#endregion

    //#region Functions
    const renderHeader = (): ReactNode => {

        return (
            <Avatar image={user?.imageUrl}/>
        );


    };
    const GetSimpleStats = async (): Promise<void> => {

        try {
            const url: string = `${GeneralHelper.APIUrl}user/stats/simple`;

            const response = await AxiosAuthenticated.get(url);

            if (response.status != HttpStatusCode.Ok)
                throw new Error("couldNotGetStats");

            setSimpleStats((response.data as ReturnStatus).Payload);

        } catch (e: any) {

            /*@TODO determine if error wille be shown or not*/

        }
    };
    //#endregion

    //#region Render

    return (
        <MotionCard style={{backgroundColor: "rgba(255,255,255,0.5)", backdropFilter: "blur(10px)", minHeight: 154}} variants={cardVariant}
                    initial={"initial"}
                    animate={simpleStats ? "animation" : ""}>
            <div className="flex flex-row">
                <></>
                <Avatar shape={"circle"} size={"xlarge"} image={user?.imageUrl} className={"mr-3"}/>
                <div className="flex align-items-start flex-column lg:justify-content-between lg:flex-row">
                    <div>
                        <div className="font-medium text-3xl text-900">{user?.fullName}</div>
                        {
                            simpleStats && (

                                <div className="flex align-items-center text-700 flex-wrap">
                                    <motion.div variants={subHeaderVariant} className={subItemClasses}>
                                        <LucideAmphora size={"1.5rem"}/>
                                        <span>{`${simpleStats.Artifacts} ${t("artifacts", {count: simpleStats.Artifacts})}`}</span>
                                    </motion.div>
                                    <motion.div variants={subHeaderVariant} className={subItemClasses}>
                                        <LucideMapPin/>
                                        <span>{`${simpleStats.ExcavationSites} ${t("excavationSites",
                                            {count: simpleStats.ExcavationSites})}`}</span>
                                    </motion.div>
                                    <motion.div variants={subHeaderVariant} className={subItemClasses}>
                                        <LucideShare2/>
                                        <span>{`${simpleStats.SharedRecords} ${t("sharedRecords", {count: simpleStats.SharedRecords})}`}</span>
                                    </motion.div>
                                </div>
                            )
                        }
                    </div>
                </div>
            </div>
        </MotionCard>
    )
        ;

    //#endregion

};

I am grateful for any help!