Next.js Discord

Discord Forum

Is there a better way to do a procedual fade in?

Answered
Least Auklet posted this in #help-forum
Open in Discord
Avatar
Least AukletOP
(preferably not letting the ServerCard be a client component)

constants/ServerCard.tsx:
const ServerCard = ({ invite, className, removeExtraClassNamesIn }: { invite: string, removeExtraClassNamesIn?: number, className?: string }) => {

  useEffect(() => {
    if (removeExtraClassNamesIn && className) {
      setTimeout(() => {
      document.getElementById('servers')?.children[discord_servers.findIndex(server => server.invite === invite)].classList.remove(...className.split(' '))
      }, removeExtraClassNamesIn)
    }
  }, [removeExtraClassNamesIn, className, invite])

...

app/servers/page.tsx:
import { ServerCard } from '@/components';
import { discord_servers } from '@/constants';

const Servers = () => {
  // on page load, remove the opacity-0 and translate-x-20 classes from each server card

  return (
    <div className='bg-black flex flex-col items-center justify-center'>
      <h1 className="bg-gray-800 bg-opacity-40 backdrop-blur-sm shadow-2xl rounded-xl p-4 w-fit text-center text-5xl font-extralight text-white tracking-widest">
        Discord Servers
      </h1>
      <div className="grid justify-center items-center gap-6 mt-4 mb-8 rounded-xl p-4 w-fit bg-gray-800 bg-opacity-40 backdrop-blur-sm shadow-2xl grid-rows-2 grid-cols-3" id="servers">
        {discord_servers.map((server, i) => <ServerCard key={i} invite={server.invite} removeExtraClassNamesIn={
          Math.max(i+1) * 150
        } className='opacity-0 transform -translate-x-20 duration-500 ease-in-out transition-all' />)}
      </div>
    </div>
  );
};

export default Servers;
Answered by Marchy
I'm not sure if this is exactly what you mean, bit if you mean fading each card in one at a time you could do this with CSS

// page.js
import styles from "./CardsGrid.module.css";

const totalCards = 100;

const CardsGrid = () => {
  return (
    <div className={styles.gridContainer}>
      {Array.from({ length: totalCards }).map((_, index) => (
        <div
          key={index}
          className={styles.card}
          style={{ "--delay": `${0.1 * index}s` }} // Set the CSS variable for delay
        />
      ))}
    </div>
  );
};

export default CardsGrid;

/* CardsGrid.module.css */

.gridContainer {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}

.card {
  width: 100px;
  height: 100px;
  background-color: #ff4500;
  opacity: 0;
  animation: fadeIn 1s forwards var(--delay, 0s);
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
Image
View full answer

2 Replies

Avatar
Least AukletOP
bump
Avatar
Marchy
I'm not sure if this is exactly what you mean, bit if you mean fading each card in one at a time you could do this with CSS

// page.js
import styles from "./CardsGrid.module.css";

const totalCards = 100;

const CardsGrid = () => {
  return (
    <div className={styles.gridContainer}>
      {Array.from({ length: totalCards }).map((_, index) => (
        <div
          key={index}
          className={styles.card}
          style={{ "--delay": `${0.1 * index}s` }} // Set the CSS variable for delay
        />
      ))}
    </div>
  );
};

export default CardsGrid;

/* CardsGrid.module.css */

.gridContainer {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
}

.card {
  width: 100px;
  height: 100px;
  background-color: #ff4500;
  opacity: 0;
  animation: fadeIn 1s forwards var(--delay, 0s);
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
Image
Answer