Eldora UI
Eldora UI
  1. Components
  2. Text Animations
  3. Fadeup

Fadeup

Text animation where the text fades up as it appears.

Fade Up

<Fadeupdemo />

Installation

Install the following dependencies:

npm install framer-motion

Copy and paste the following code into your project.


import clsx from "clsx";
import { motion } from "framer-motion";

export function FadeUpStagger() {
  const FADE_UP_ANIMATION_VARIANTS = {
    hidden: { opacity: 0, y: 10 },
    show: { opacity: 1, y: 0, transition: { type: "spring" } },
  };
  return (
    <motion.div
      initial="hidden"
      animate="show"
      viewport={{ once: true }}
      variants={{
        hidden: {},
        show: {
          transition: {
            staggerChildren: 0.15,
          },
        },
      }}
    >
      <motion.h1
        className={clsx(
            "text-center font-display font-bold drop-shadow-sm",
            "text-4xl md:text-5xl lg:text-6xl xl:text-7xl",
            "tracking-[-0.02em]",
            "md:leading-[4rem] lg:leading-[4.5rem] xl:leading-[5rem]"
          )}
        variants={FADE_UP_ANIMATION_VARIANTS}
      >
        Fade Up
      </motion.h1>
     
    </motion.div>
  );
}

Update the import paths to match your project setup.

Built by karthikmudunuri. The source code is available on GitHub.