I am trying to make a vertical text slide. Having not found help in reactjs, I try to do it myself and I'm pretty happy with the result but a slight bug appears at the end of each word slide.

I imagine that there are several ways to create this animation but it is the only one that es to me with my knowledge in JS.

Here my code:

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

const Version1 = () => {

  const [ words, setWords ] = useState(['Victor', 'Alex', 'Lucie'])

  const wrapperRef = useRef()

  const handleAnim = () => {

    setTimeout(() => {
      const copyWords = [ ...words ];
      const firstElem = copyWords.splice(1)
      wrapperRef.current.style.transition = 'none';
      wrapperRef.current.style.top = '0px'
      setWords([ ...firstElem.concat(copyWords) ])
    },1000);

    wrapperRef.current.style.transition = '0.5s';
    wrapperRef.current.style.top = '-70px'
  }
  useEffect(() => {
    setTimeout(() => {
      handleAnim()
    }, 2000);
  })

  return (
    <>
      <div className="test-container">
        <div className='test-title'>Hello</div>
        <div className='text-container-word'>
          <div ref={wrapperRef} className='text-container-word-wrapper'>
            <span className='text-word'>{words[0]}</span>
            <span className='text-word'>{words[1]}</span>
          </div>
        </div>
      </div>
      <style jsx>
        {`
          .test-container {
            padding: 100px 0;
            width: 100%;
            display: flex;
          }
          .test-title {
            font-size: 48px;
            font-weight: bold;
            color: blue;
          }
          .text-container-word {
            position: relative;
            width: 200px;
            height: 70px;
            background-color: green;
            display: inline-block;
            overflow: hidden;
            margin-top: -7px;
          }
          .text-container-word-wrapper {
            height: auto;
            position: relative;
            top: 0px;
          }
          .test-container h1 {
            position: relative;
            display: inline;
            padding: 10px;
          }
          .text-word {
            height: 70px;
            font-size: 48px;
            font-weight: bold;
            display: block;
            transition: 0.5s;
            line-height: 70px;
          }
       

        `}
      </style>
    </>
  )
}

export default Version1

I am trying to make a vertical text slide. Having not found help in reactjs, I try to do it myself and I'm pretty happy with the result but a slight bug appears at the end of each word slide.

I imagine that there are several ways to create this animation but it is the only one that es to me with my knowledge in JS.

Here my code:

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

const Version1 = () => {

  const [ words, setWords ] = useState(['Victor', 'Alex', 'Lucie'])

  const wrapperRef = useRef()

  const handleAnim = () => {

    setTimeout(() => {
      const copyWords = [ ...words ];
      const firstElem = copyWords.splice(1)
      wrapperRef.current.style.transition = 'none';
      wrapperRef.current.style.top = '0px'
      setWords([ ...firstElem.concat(copyWords) ])
    },1000);

    wrapperRef.current.style.transition = '0.5s';
    wrapperRef.current.style.top = '-70px'
  }
  useEffect(() => {
    setTimeout(() => {
      handleAnim()
    }, 2000);
  })

  return (
    <>
      <div className="test-container">
        <div className='test-title'>Hello</div>
        <div className='text-container-word'>
          <div ref={wrapperRef} className='text-container-word-wrapper'>
            <span className='text-word'>{words[0]}</span>
            <span className='text-word'>{words[1]}</span>
          </div>
        </div>
      </div>
      <style jsx>
        {`
          .test-container {
            padding: 100px 0;
            width: 100%;
            display: flex;
          }
          .test-title {
            font-size: 48px;
            font-weight: bold;
            color: blue;
          }
          .text-container-word {
            position: relative;
            width: 200px;
            height: 70px;
            background-color: green;
            display: inline-block;
            overflow: hidden;
            margin-top: -7px;
          }
          .text-container-word-wrapper {
            height: auto;
            position: relative;
            top: 0px;
          }
          .test-container h1 {
            position: relative;
            display: inline;
            padding: 10px;
          }
          .text-word {
            height: 70px;
            font-size: 48px;
            font-weight: bold;
            display: block;
            transition: 0.5s;
            line-height: 70px;
          }
       

        `}
      </style>
    </>
  )
}

export default Version1

• javascript
• css
• reactjs

Share Improve this question Follow asked May 11, 2022 at 13:23 Yoan BousquetYoan Bousquet 8922 silver badges77 bronze badges 2

• Most likely due to the timer (setTimeout). I think you can achieve this kind of animation with css only. Let me see. – A G Commented May 11, 2022 at 14:05
• I can't test this at the moment, but useEffect without dependencies usually results to unexpected behavior could you add an empty array to your useEffect dependencies list? – Menawer Commented May 11, 2022 at 14:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here is a pure css based solution that uses words from state without the useEffect hacks.

const {useState} = React;

function App() {
  const [words, setWords] = useState(["Victor", "Alex", "Lucie", "Michael"]);
  return (
    <div className="App">
      <div className="scroller">
        <span>
          {words[0]}
          <br />
          {words[1]}
          <br />
          {words[2]}
          <br />
          {words[3]}
        </span>
      </div>
    </div>
  );
}

ReactDOM.render(
      <App/>,
      document.getElementById("react")
    );

.App {
  font-family: sans-serif;
  text-align: center;
}

.scroller {
  height: 1.2em;
  line-height: 1.2em;
  position: relative;
  overflow: hidden;
  font-size: 40px;
  text-align: center;
}
.scroller > span {
  position: absolute;
  top: 0;
  animation: slide 6s infinite;
  font-weight: bold;
  background-color: green;
}
@keyframes slide {
  0% {
    top: 0;
  }
  25% {
    top: -1.2em;
  }
  50% {
    top: -2.4em;
  }
  75% {
    top: -3.6em;
  }
}

<script src="https://cdnjs.cloudflare./ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react">

set height and width with overflow-f:scroll

overflow-y: scroll;

you can also see this: https://www.w3schools./cssref/tryit.asp?filename=trycss3_overflow-y