Flip Words
Create clear, bold motives for your website with flipwords. Expect updates on this, animations will be improved soon.
This component is known to be a little buggy in some cases. You probably wont even come across this problem though.


# Preview

Preview of element and code usage

#1 Add Flipwords code

components-stuff/flip-words.tsx

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

const words = ["perfect", "good", "great", "awesome"];

const FlippingWords: React.FC = () => {
  const [currentWordIndex, setCurrentWordIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentWordIndex((prevIndex) => (prevIndex + 1) % words.length);
    }, 3000); // Change word every 4 seconds to match the animation duration

    return () => clearInterval(interval);
  }, []);

  return (
    <h1 className="mt-4 mb-4">
      Create <span className="fade-up inline-block">{words[currentWordIndex]}</span> <br /> websites with Eternity UI
    </h1>
  );
};

export default FlippingWords;

#2 Add CSS code

globals.css

/* FlippingWords by Eternity UI */
@keyframes fadeUp {
    0%, 10% {
      opacity: 0;
      transform: translateY(20px);
    }
    30%, 40% {
      opacity: 1;
      transform: translateY(0);
    }

    50%, 60% {
      opacity: 1;
      transform: translateY(0);
    }

    60%, 70% {
      opacity: 1;
      transform: translateY(0);
    }

    80% {
      opacity: 1;
      transform: translateY(0);
    }

     90% {
      opacity: 0.75;
      transform: translateY(0);
    }

    100% {
      opacity: 0;
      transform: translateY(-20px);
    }
  }
  
  .fade-up {
    animation: fadeUp 3s infinite;
  }

Done! 🎉
Nice work, you're all set!

Check out Background patterns