why does my html element dissapear after animation

i have an animation on 3 html elements for a landing page im working on. They work as intended however , im trying to fade each element in one after the other. i have achieved this too, but when the page loads the two lower elements ( an h1 tag and a button ) both briefly appear on the page before the animation starts kinda ruining the effect im trying to achieve.

so the animations play out , the first element does what it needs to, the second elements plays the animation but then it disappears from the page. I’ll provide relevant code below.

im using tailwind on a nextJS project here are the code blocks

HTML

import React from "react";
import { useState, useEffect } from "react";

function Hero() {
  const [animText, setAnimText] = useState("0");

  useEffect(() => {
    const handleText = () =>{
        setAnimText('1')
    };
    addEventListener('load' , handleText)
  }, []);

  return (
    <div className="flex items-center justify-center h-screen w-screen mb-[10rem] bg-center bg-cover bg-no-repeat custom-img">
      {/*OverLay*/}
      <div className="absolute top-0 left-0 right-0 bottom-0 h-screen bg-black/70 z-[2]" />
      <div className="text-white flex flex-col items-center p-5 z-[2] ml[-10rem] mt-[5rem]">
        <h2 className="font-Courgette text-4xl lg:text-5xl py-2 lg:animate-trackingInXpFwdTop">
          Welcome to
        </h2>
        <h1
          style={{ opacity: `${animText}` }}
          className="text-5xl lg:text-7xl font-bold py-5 lg:animate-trackingInXpFwdBtm"
        >
          PATO PALACE
        </h1>
        <button className="border-2 rounded-md px-2 py-2 text-sm font-semibold ">
          View Menu
        </button>
      </div>
    </div>
  );
}

export default Hero;

and since im using tailwind for styling , here is the config.js for the animation keyframes

    keyframes: {
      trackingInXpFwdTop :{
        '0%' : {'letter-spacing' : '0',
                'transform' : 'translateZ(-700px) translateY(-500px)',
                 'opacity' : '0'},
        '40%': {'opacity': '0.6'},
       '100%': {'transform' : 'translateZ(0px) translateY(0px)',
                'opacity' : '1'}
      },
      trackingInXpFwdBtm :{
        '0%' : {'letter-spacing' : '0',
                'transform' : 'translateZ(-700px) translateY(500px)',
                 'opacity' : '0'},
        '40%': {'opacity': '0.6'},
       '100%': {'transform' : 'translateZ(0px) translateY(0px)',
                'opacity' : '1'}
      },
    },
    animation: {
      trackingInXpFwdTop : 'trackingInXpFwdTop linear 1.5s 0s', 
      trackingInXpFwdBtm : 'trackingInXpFwdBtm linear 1.5s 1s' 
    }

i tried to remedy this by using useState and useEffect to set the opacity of the second element (h1 tag) to 0 at the start then have it set to 1 as the page loads (which i understand now is kinda redundant) expecting the end state of my opacity to be set to 1 therefore showing the element in question

>Solution :

This is just how CSS animations work. You’ll need to use the animation-fill-mode with a value of forwards to get the animation to "stay" on the last frame when completed. Also if you want to ensure that all of your elements are "hidden" before the animation starts, then you need to add the Tailwind opacity-0 class to the each of them. The opacity get overridden with the animation.

Leave a Reply