Движение кадров, задержка поворота Y при анимации x

Question

Я работаю с Framer-motion и пытаюсь найти способ отложить анимацию rotateY, в то время как x анимируется в определенную c позицию, затем запустить rotateY.

Возможно ли это в движении Фреймера?

Пример:

const variants = {
  flip: {
    rotateY: 0,
    x: -20,
    scale: 1,
    transition: {
      ease: "easeInOut",
      duration: 1.2
    }
  },
  hidden: {
    rotateY: 180,
    x: 150,
    scale: 0.5,
    transition: {
      ease: "easeInOut",
      duration: 1
    }
  }
};

Answer 1

Вы можете настроить переход для каждого свойства. Это позволяет добавить необходимую задержку к rotateY:

const duration = 1.2;

const variants = {
  flip: {
    rotateY: 0,
    x: -20,
    scale: 1,
    transition: {
      ease: "easeInOut",
      duration,
      rotateY: {
        delay: duration,
        duration
      }
    }
  },
  hidden: {
    rotateY: 180,
    x: 150,
    scale: 0.5,
    transition: {
      ease: "easeInOut",
      duration,
      rotateY: {
        delay: duration,
        duration
      }
    }
  }
};

См. Это CodeSandbox .