Fade-in a new, revised text after fading-out the original text in ReactJS

Question

Fade-in a new, revised text after fading-out the original text in ReactJS

I have a bunch of p elements that I'd like to cycle through, fading in one at a time and then replacing it with the next. Here is the jQuery example on CodePen: https://codepen.io/motion333/pen/EBBGVM

Now, I'm attempting to achieve the same effect using React with the following code:

useEffect(() => {
        (function() {

            var quotes = document.getElementsByClassName('tagline-text');
            var quoteIndex = -1;

            function showNextQuote() {
              ++quoteIndex;
              document.querySelectorAll(".tagline-text")[quoteIndex % quotes.length].fadeIn(1000).delay(1000).fadeOut(1000, showNextQuote);
            }

            showNextQuote();

          })();
}, []);

Here's the container element:

<div className="tagline h-100 d-flex flex-column align-items-center justify-content-center">
    <p className="tagline-text">Your Business</p>
    <p className="tagline-text">Your Brand</p>
    <p className="tagline-text">Your Content</p>
    <p className="tagline-text">Your Portfolio</p>
    <p className="tagline-text">You.</p>
</div>

However, when I run the code, I encounter this error message:

Uncaught TypeError: document.querySelectorAll(...)[(quoteIndex % quotes.length)].fadeIn is not a function

javascript jquery css reactjs

Answer 1

Answer №1

that should work.

const { useState, useEffect } = React;

const items = ["Your Business", "Your Brand", "Your Content", "Your Portfolio", "You."];
const time_between_content = 2; // show content for 2s before fading out.
const transition_duration = 0.5;

const App = () => {
  const [displayContent, setDisplayContent] = useState(0);
  
  useEffect(() => {
    const timerId = setInterval(() => {
      setDisplayContent(p => {
        if(p === items.length - 1) p = -transition_duration;
        else p = p + transition_duration;
        return p;
      });
    }, time_between_content * 1000)
    
    return () => clearInterval(timerId);
  }, [])

  return <div className="pContainer">
    {items.map((item, index) => <p key={index} style={{ opacity: `${displayContent === index ? 1 : 0}`, transitionDuration: `${time_between_content + transition_duration}s` }}>{item}</p>)}
</div>
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

.pContainer {
  position: relative;
}

.pContainer p {
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 2

that should work.

const { useState, useEffect } = React;

const items = ["Your Business", "Your Brand", "Your Content", "Your Portfolio", "You."];
const time_between_content = 2; // show content for 2s before fading out.
const transition_duration = 0.5;

const App = () => {
  const [displayContent, setDisplayContent] = useState(0);
  
  useEffect(() => {
    const timerId = setInterval(() => {
      setDisplayContent(p => {
        if(p === items.length - 1) p = -transition_duration;
        else p = p + transition_duration;
        return p;
      });
    }, time_between_content * 1000)
    
    return () => clearInterval(timerId);
  }, [])

  return <div className="pContainer">
    {items.map((item, index) => <p key={index} style={{ opacity: `${displayContent === index ? 1 : 0}`, transitionDuration: `${time_between_content + transition_duration}s` }}>{item}</p>)}
</div>
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

.pContainer {
  position: relative;
}

.pContainer p {
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: ease-in-out;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Fade-in a new, revised text after fading-out the original text in ReactJS

Answer №1

Similar questions

What is the best way to modify the color of the active tab I have chosen?

Trouble with displaying a cube from Blender to Three.js

Error 56 EROFS encountered when trying to save a file in Node.js filesystem every 2 seconds

Stretching the Mantine Accordion Section

Tips for including a currency symbol before an input field using Material UI

Execute the index.js file using the parameters specified in the mocha test suite

How come flex won't let me rearrange an image?

"When using `app.use(express.static`, it appears that the functionality is not working properly when the app is a sub

Express.js automatically sets timeouts for requests to static files

Set up Node to utilize Object.assign

Implement a new aggregate function for tooltips in the Kendo chart

What is the best way to increase the space between table columns in CSS?

The MongoDB operator "$in" does not recognize the type array that currently exists in the field

When the page is launched, creating a rectangle at a precise location on the area map

"Experience the new Bootstrap 5 feature: Off-Canvas sliding from left to

Is the webdriver.io waituntil method designed to return a boolean value of true or false

Locating the Active Object's Coordinates in fabric.js

Creating dynamic dropdown menus using JSON files in jQuery mobile is a useful technique for enhancing user experience on

The code encountered a parsing error at 11:1, due to the presence of

Looking for a search box that functions like Google's search feature