JavaScript implements smooth transition from thumbnail to full-width image page

Question

http://manifesto.clapat.com/

If you click on any item on the homepage, you will transition from a thumbnail to a full-screen image that will become the title of that item's page. How are these transition effects created and what would be the best way to implement them using internal routing rather than React Router, but if anyone can make it work with React Router I can port that as well.

There are some tutorials available, but they all load data on the same page, similar to a full screen modal component, rather than going to another/project page. The main goal is to transition to other pages while keeping the image as loading.

Answer 1

You need server-side rendering to achieve this effect, because the normal rendering method will not start loading the image until you jump to the page. In Next.js, all pages accessed through the Link element are pre-rendered as long as you are on the page that contains the element pointing to that page.

In order to achieve this effect, first you need to set the position of the image to fixed in CSS, then create a transition effect, scale the image to width: 100% and height: 100%, set the transition time to 500 milliseconds, and You need to set a timer to automatically jump to the next page that has an image as the background after the transition ends. I don't know if you need to do this, but include a somewhere so that the page will be pre-rendered and the image will load immediately when routed to the page.

First page:

const router = useRouter();

const [transitionStarted, setTransitionStarted] = useState<boolean>(false);

function handleClick() {
  setTransitionStarted(true);

  setTimeout(() => {
    router.push("/next-page");
  }, 500)
}

return (
  <div>
    <Link className="hidden" href="/next-page" />
    <Image 
      className={`duration-500 ${transitionStarted ? "fixed w-full h-full top-0 left-0" : ""}`} 
      onClick={handleClick}> 
      src="path-to-image" 
      fill 
      alt="image link" />
  </div>
  
)

Next page:

return (
  <div>
    <Image className="fixed w-full h-full top-0 left-0" fill alt="image that is used as background on next page" />
  </div>
)

I wrote this example in tailwindcss to make it more readable, but you can achieve the same effect in any other CSS library. To make the transition smooth, you just need to set the transition duration and the duration of setTimeout to the same, so that the page will only redirect when the transition is complete and the images on both pages are exactly the same.

Hope I gave you the answer you needed. If you need to see what the classes in the example do, you can view the tailwindcss documentation.