Failing to compile my Next js project with Typescript & Tailwind

The npm run dev mode works fine, but I am getting a failed to compile error during the build process due to the below code snippet.

These are the scripts, dependicies and dev dependicies in the package.json file:

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "^10.4.21",
    "clsx": "^2.1.1",
    "motion": "^12.18.1",
    "next": "15.3.3",
    "postcss": "^8.5.4",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwind-merge": "^3.3.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@svgr/webpack": "^8.1.0",
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "babel-plugin-inline-react-svg": "^2.0.2",
    "eslint": "^9",
    "eslint-config-next": "15.3.3",
    "tailwindcss": "^4.1.8",
    "typescript": "^5"
  }
}

This is my full code to the Hero section:

"use client";
import ArrowIcon from "@/assets/arrow-right.svg";
import poundImage from "@/assets/pound.png";
import houseImage from "@/assets/house.png";
import businessImage from "@/assets/business.png";

import { motion, useScroll, useTransform } from "framer-motion";

import { useRef } from "react";
export const Hero = () => {
    const heroRef = useRef(null);
    const { scrollYProgress } = useScroll({
        target: heroRef,
        offset: ["start end", "end start"],
    });
    const translateY = useTransform(scrollYProgress, [0, 1], [150, -150]);



    return <section ref={heroRef} className="pt-8 pb-20 md:pt-5 pl-20 pr-20 md:pb-10 bg-[radial-gradient(ellipse_200%_100%_at_bottom_left,#8a0194,#ffffff_100%)] overflow-x-clip">
        <div className="container">
            <div className="md:flex items-center">
                <div className="md:w-[478px]">
                    <div className="text-sm inline-flex border border-[#222]/10 px-3 py-1 rounded-lg tracking-tight">Rethink Finance</div>
                    <h1 className="text-5xl md:text-7xl font-bold tracking-tighter bg-gradient-to-b from-black to-[#8a0194] text-transparent bg-clip-text mt-6">Empowering Your Business with Smart Financial Solutions</h1>
                    <p className="text-xl text-[#8a0194] tracking-tight mt-6">Whether you are seizing new opportunities, investing in inventory, or streamlining your cash flow, our tailored financial solutions are designed to power your progress and take your business further.</p>
                    <div className="flex gap-1 items-center mt-[30px]">
                        <a href="https://us.bigin.online/org884823567/forms/check-your-funding-eligibility-for-free"><button className="bg-fuchsia-800 text-white focus:outline-none hover:bg-indigo-600 px-4 py-2 rounded-lg font-medium inline-flex items-center justify-center tracking-tight">Get Started</button></a>
                        <button className="text-black px-4 py-2 font-light inline-flex items-center justify-center tracking-tight gap-1">
                            <span>Learn more</span>
                            <ArrowIcon className="h-5 w-5" />
                        </button>
                    </div>
                </div>
                <div className="mt-20 md:mt-0 md:h-[648px] md:flex-1 relative">
                    <motion.img
                        src={poundImage.src} alt="Pound Image" className="md:absolute md:h-full md:w-auto md:max-w-none md:-left-6 lg:left-0"
                        animate={{
                            translateY: [-30, 30],
                        }}
                        transition={{
                            repeat: Infinity,
                            repeatType: "mirror",
                            duration: 2,
                            ease: "easeInOut",
                        }} />
                    <motion.img src={houseImage.src} width={220} height={220} alt="House image" className="hidden md:block -top-8 -left-32 md:absolute" style={{ translateY: translateY }} />
                    <motion.img src={businessImage.src} width={220} height={220} alt="Business image" className="hidden lg:block absolute top-[524px] left-[448px] rotate-[30deg]" style={{ translateY: translateY, }} />
                </div>
            </div>
        </div>

    </section>
};

This is the error that I get when try to compile the project:

./src/sections/Hero.tsx:39:29
Type error: Object literal may only specify known properties, and 'translateY' does not exist in type 'string[] | TargetAndTransition | LegacyAnimationControls'.

  37 |                         src={poundImage.src} alt="Pound Image" className="md:absolute md:h-full md:w-auto md:max-w-none md:-left-6 lg:left-0"
  38 |                         animate={{
> 39 |                             translateY: [-30, 30],
     |                             ^
  40 |                         }}
  41 |                         transition={{
  42 |                             repeat: Infinity,
Next.js build worker exited with code: 1 and signal: null

What is the cause for this issue ? And how to solve it.

A solution for this.

In Framer Motion, translateY is usually part of the style or motion.div/motion.img elements, not inside the animate keyframes.

Change translateY to y in your animate like this:

 animate={{
    y: [-30, 30]
  }}

That should fix the build error.