Fade in Next.js Images on load - example or plugin?
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 thread14 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.