I managed to achieve this animation through CSS animations and React. but go stuck in flickering problem. I don't know why this is happening maybe 'cause I used setInterval or there is some problem with my css animations keyframes. help me to solve this problem. the flicker only occurs after some time. and after refreshing the page the animation works perfectly fine without flicker problem.

this is how the animation looks after refreshing the page and this is what I want too. (ignore the screen recorder watermark).

animation I want

but after sometime the animation starts flickering like this.

Flickering problem

here are the code snippets I wrote jsx snippet

<div className="relative w-[280px] md:w-[350px] lg:w-[500px]">
  <span>{"[ "}</span>

  <p className="text_animate ml-2">
    {dev ? "for" : "by"} Developers
  </p>

  <span className="absolute right-0 ">{" ]"}</span>
</div>

css snippet

.text_animate {
  color: orange;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  letter-spacing: .15em;
  text-align: start;
  animation: text-up 6s linear infinite;
  cursor: none;
}
    
@keyframes text-up {
  0% {
    top:45px;
    opacity: 0;
  }

  20% {
    top:0;
    opacity: 1;
  }

  35% {
    top: 0;
    opacity: 1;
  }

  50% {
    top: -45px;
    opacity: 0;
  }

  52% {
    top: 45px;
    opacity: 0;
  }

  70% {
    top: 0;
    opacity: 1;
  }

  85% {
    top: 0;
    opacity: 1;
  }

  100% {
    top: -45px;
    opacity: 0;
  }
}

useState changing text

const [dev, setDev] = useState(true);

setInterval(() => {
  setDev(!dev);
}, 3000);

If there is any better way to achieve this I would really love to learn so let me know that too.

CodePudding user response：

Maybe you should put setInterval to useEffect, and remember to clear timer. Like this:

useEffect(() => {
  const timer = setInterval(() => {
    setDev(!dev);
  }, 3000);

  return () => {
    clearInterval(timer);
  }
}, []);

And there is a solution only using css to implement this, I will write a demo later.

EDIT:

Explain the above code:

useEffect with [] as second param will make sure run setInterval once when mount the component.

The clearInterval in return function will make sure engine GC the variables in setInterval callback functions when unmount the component, or the setInterval will still work even though you needn't it.

CSS only solution:

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  margin: 0;
  padding: 0;
}

.scroll-container {
  overflow: hidden;
  height: calc(var(--line-h) * 1px);
  line-height: calc(var(--line-h) * 1px);
  font-size: 18px;
}

.scroll-container ul {
  animation-name: move;
  animation-duration: calc(var(--speed) * var(--lines));
  animation-timing-function: steps(var(--lines));
  animation-iteration-count: infinite;
}

.scroll-container ul li {
  animation-name: li-move;
  animation-duration: var(--speed);
  animation-iteration-count: infinite;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, calc(var(--lines) * var(--line-h) * -1px));
  }
}

@keyframes li-move {
  0% {
    transform: translate(0, 0);
  }
  50%,
  100% {
    transform: translate(0, calc(var(--line-h) * -1px));
  }
}

<div
  
  style="--lines: 2; --line-h: 26; --speed: 3s"
>
  <ul>
      <li>For Developers</li>
      <li>By Developers</li>
      <!-- repeat first in tail for infinity -->
      <li>For Developers</li>
  </ul>
</div>

I leaned this from Chokcoco on CodePen but forget which post.