Animate Next.js Image with motion.dev

Create a Motion custom component of next/image and use it for your animations

Animate the NEXT.js logo using motion.dev

Animate the native next/image Image component using motion.dev. In this example, I’m animating the NEXT.js logo of a default Next.js project created with npx create-next-app@latest (works with all image types):

1. Create a new client component, e.g., motion-image.tsx

// motion-image.tsx

'use client'

import { motion } from 'motion/react'
import Image from 'next/image'

export const MotionImage = motion.create(Image)

2. Use the MotionImage component in your app

// page.tsx

import { MotionImage } from "./motion-image";

export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
        <MotionImage
          initial={{ opacity: 0, y: 24 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="dark:invert"
          src="/next.svg"
          alt="Next.js logo"
          width={180}
          height={38}
          priority
        />

      ...
    </div>
  );
}