Get help on Discord

Fade in Next.js Images on load - example or plugin?

14 replies
Last updated: Jan 28, 2026
hello! someone has an example or plugin to fadein next/images when loads ?
AI Update

Hey there! This is actually a Next.js/React question rather than a Sanity-specific one, but I'm happy to help since many Sanity users work with Next.js!

For fading in Next.js <Image> components when they load, here's a common approach using the onLoad callback (which replaced the deprecated onLoadingComplete):

import Image from 'next/image';
import { useState } from 'react';

function MyImage({ src, alt }) {
  const [isLoaded, setIsLoaded] = useState(false);
  
  return (
    <Image
      src={src}
      alt={alt}
      width={800}
      height={600}
      onLoad={() => setIsLoaded(true)}
      className={`transition-opacity duration-500 ${
        isLoaded ? 'opacity-100' : 'opacity-0'
      }`}
    />
  );
}

With Tailwind CSS (which you mentioned), you can make it even cleaner:

import Image from 'next/image';
import { useState } from 'react';

export default function FadeInImage({ src, alt, ...props }) {
  const [isLoaded, setIsLoaded] = useState(false);
  
  return (
    <div className="relative">
      <Image
        src={src}
        alt={alt}
        onLoad={() => setIsLoaded(true)}
        className={`
          transition-opacity duration-700 ease-in-out
          ${isLoaded ? 'opacity-100' : 'opacity-0'}
        `}
        {...props}
      />
    </div>
  );
}

If you're using Sanity images specifically, you'd typically use @sanity/image-url to generate the URLs:

import imageUrlBuilder from '@sanity/image-url';
import Image from 'next/image';
import { useState } from 'react';

const builder = imageUrlBuilder(sanityClient);

function SanityImage({ image, alt }) {
  const [isLoaded, setIsLoaded] = useState(false);
  
  return (
    <Image
      src={builder.image(image).width(800).url()}
      alt={alt || image.alt || ''}
      width={800}
      height={600}
      onLoad={() => setIsLoaded(true)}
      className={`transition-opacity duration-500 ${
        isLoaded ? 'opacity-100' : 'opacity-0'
      }`}
    />
  );
}

You can adjust the duration-500 (500ms) to whatever timing feels right for your design. Some people prefer duration-700 or duration-300 depending on the feel they want.

Hope this helps! Let me know if you need any clarification on integrating this with your Sanity content.

Show original thread
14 replies

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?