Trying to be different isn't easy. We get so accustomed to usual apps, layouts, and colors that it's hard to think of something else.

In any case, here is my take on a different 404 page design. The tools I use are always the same: React/Next.js for the page, Tailwind CSS for styling, and Framer Motion to make it move.

Would you like to skip to the end?You canpreviewit at my website with the full code ready to grab. Also, there are many more designs! Hope you like it.

First Things First

I assume you know what React/Next.js is and how to install the necessary tools and libraries. I will be writing for Next.js. Here is a brief walkthrough:

1. InstallNextJsor justReact
2. AddTailwindCSS
3. And finally, addFramer Motion!

Let's Begin

Create a file under the /pages directory and name it 404.js. But you are not limited to 404, of course. You can read about other custom errors here and change the page name with the contents in them accordingly.

After creating the page we need a function.
**404.js**

export default function YouDiedErrorPage() { return(...) }

Name of the function doesn't matter, just name it anything you want.

As you can see in the cover image, I have a text at the center of the screen. So we need a screen and a text!

**404.js**

export default function YouDiedErrorPage() { return ( // Div as the screen 
 {/* A container for the text which is centered */} 
 {/* And a text with an id of title */} 
 YOU 
 DIED 
 
 
 ); }

Whats the point of having framer motion if we are going to have just a single text? You are right! Let's have more text with proper styling and responsive goodness.

**404.js**

export default function YouDiedErrorPage() { return ( // Div as the screen 
 {/* A container for the text */} 
 {/* And a text with an id of title */} 
 YOU 
 DIED 
  Click here to respawn ↻  
 - 404: Death by broken link! - 
 
 
 ); }

Have you ever played a Dark Souls-like game?If you fail or die, the"Game Over"(or in our case,"You Died") text fades and scales in. After that, a"Load Game"or"Exit"button appears along with some statistics or other relevant information. This will be the same!

We will show the title and after that a link with"Click here to respawn ↻"text will appear with a"- 404: Death by broken link! -"subtitle.

As you can see we have id's for each element which we will use to make the animations. For that we need framer motion's useAnimate() hook which you can read about ithere.

Let's Animate

Framer Motion’s useAnimate hook with async functions allows you to easily sequence animations in any way you want. All you need is a scope to tell Framer Motion where to look and an animate function to specify what to do. Check out the code below:

const [scope, animate] = useAnimate(); async function killThem() { await animate("#title", { scale: 2, opacity: 1 }, { duration: 3 }); await animate("#title", { opacity: 0 }, { duration: 1 }); await animate("#respawnText", { opacity: 1 }, { duration: 1 }); await animate("#reasonOfDeath", { opacity: 1 }, { duration: 0.7 }); }

Everything here is pretty self-explanatory. Create an async function with apropername, and by awaiting every single animation create a sequence. Pick an id and tell it what to do. Amazingly simple! Look at the final code now and you will see what it does. I also added some additional functions which will be useful for development.

**404.js**

import { useAnimate } from "framer-motion"; import { useEffect } from "react"; export default function YouDiedErrorPage() { const [scope, animate] = useAnimate(); async function killHim() { await animate("#title", { scale: 2, opacity: 1 }, { duration: 3 }); await animate("#title", { opacity: 0 }, { duration: 1 }); await animate("#respawnText", { opacity: 1 }, { duration: 1 }); await animate("#reasonOfDeath", { opacity: 1 }, { duration: 0.7 }); } // With this we are starting the animation, you can also call the function in anywhere you like! useEffect(() => { killHim(); }, []); // Function to refresh the page for development and demonstration purposes. function handleRespawnClick() { window.location.reload(); } return ( 
 
 
 YOU 
 DIED 
  Click here to respawn ↻  
 - 404: Death by broken link! - 
 
 
 ); }

Here I have the scope/ref at the container div. It is always better to have container divs for the animations instead of the entire screen. Remember to change the anchor link to anywhere you want and don't forget to turn it to a next/link if you are using NextJs :)

For now, that's all there is. Just a concept with a nice and easy way of making animations with framer-motion. Preview ithere, enjoy and have a good day!

The above is the detailed content of Watch Out For Broken Links, Page With Framer Motion, TailwindCSS and NextJs. For more information, please follow other related articles on the PHP Chinese website!