CODEWITHSUNDEEP
javascripthtmlcssreactjssass
Olivia Webster
Olivia Webster

Reputation: 13

Sequantially make text elements on fade in on page load in react component

Hello on page load of a react component I would like text elements to fade in one after another.using css preferably.

Example:

<h1 className='hi'>Hi</h1> (fades in)
Then
<p className='boo'>boo</p> (fades in)
<p className='woo'>woo</p> (fades in)```

Any help is appreciated!

Upvotes: 0

Views: 890

Answers (1)

Alexander Nied
Alexander Nied

Reputation: 13678

Here's an example of how to define an animation in CSS, and then render a list with progressively longer animation start delays based on index:

const FadeList = () => {
  const listItems = ['Stantz', 'Spangler', 'Venkman', 'Zeddmore'];
  
  return (
    <ul>
      {listItems.map((item, idx) => (
        <li className="fade-list-item" style={{ animationDelay: `${500 * idx}ms` }}>{item}</li>
      ))}
    </ul>
  );
}

ReactDOM.render(
  <FadeList />,
  document.getElementById("react")
);
.fade-list-item {
  opacity: 0;
  animation-name: fadein;
  animation-duration: 500ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Upvotes: 1

Related Questions