useAnimations (@react-fiber/drei) + NextJS14

Hi ! i’ve a problem with my transition between 2 animations.
I’m following wawa sensei tutorial on youtube, but i’m using NextJS and not ViteJS.
In a vitejs project, the code works perfectly, but not in nextjs and i don’t know why and how resolve it

The problem is in my useEffect, i use a fadeIn to make a “smooth” effect between 2 animations, but the result is like a rerender component

There is the code component

import { useAnimations, useFBX, useGLTF } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import React, { useEffect, useRef, useState } from "react";
import { useControls } from "leva";
import * as THREE from "three";

export default function Avatar(props) {
  const { animation } = props;
  const { headFollow, cursorFollow } = useControls({
    headFollow: false,
    cursorFollow: false,
  });
  const group = useRef();

  const { nodes, materials } = useGLTF("/models/65e9daad23ee6c0016182b1f.glb");

  const { animations: typingAnimation } = useFBX("/animations/type.fbx");
  const { animations: standingAnimation } = useFBX(
    "/animations/standingIdle.fbx"
  );
  const { animations: fallingAnimation } = useFBX(
    "/animations/fallingIdle.fbx"
  );

  typingAnimation[0].name = "Typing";
  standingAnimation[0].name = "Standing";
  fallingAnimation[0].name = "Falling";

  const { actions } = useAnimations(
    [typingAnimation[0], fallingAnimation[0], standingAnimation[0]],
    group
  );

  useFrame((state) => {
    if (headFollow) {
      group.current.getObjectByName("Head").lookAt(state.camera.position);
    }
    if (cursorFollow) {
      const target = new THREE.Vector3(state.mouse.x, state.mouse.y, 1);
      group.current.getObjectByName("Head").lookAt(target);
    }
  });

  **useEffect(() => {**
**    actions[animation].fadeIn(0.5).play();**
**    return () => {**
**      actions[animation].fadeIn(0.5).stop();**
**    };**
**  }, [animation]);**

  return (
   <--------The generated code glft --------->
  );
}
useGLTF.preload("/models/65e9daad23ee6c0016182b1f.glb");
useFBX.preload("/animations/type.fbx");
useFBX.preload("/animations/standingIdle.fbx");
useFBX.preload("/animations/fallingIdle.fbx");

Hi @Sylvain_Leguay!

I’m having the same issue! Have you been able to find a solution regarding that?

Thanks,
Clarel

Hi @Clarel_Antoine , actually i found only one solution : remove nextJS and go to ViteJS…

But it’s really not my favorite solution …

If someone got any solution ? :slight_smile: