react-animated-text-content icon indicating copy to clipboard operation
react-animated-text-content copied to clipboard

Animation triggers if other content on the page performs a transition

Open kwameopareasiedu opened this issue 2 years ago • 1 comments

Issue

First of all. Awesome library. However I have another element on my page which periodically transitions between text. Any time the element's transition completes, every AnimatedTextContent on the page reruns

Steps To Reproduce

  1. Use AnimatedTextContent on some text
  2. Have another element on the page start a transition. You can define a transition: opacity 0.5s, then use a setInterval to periodically transition the element opacity like below:
setInterval(
  () => {
    element.style.opacity = Math.abs(parseFloat(element.style.opacity) - 1), 
  }, 1000
);

Expected Behaviour

Any AnimatedTextContent that has finished animating should not rerun

Actual Behaviour

Every AnimatedTextContent on the page reruns when another element completed a transition

kwameopareasiedu avatar Jun 14 '22 02:06 kwameopareasiedu

Welcome

Unfortunately, I couldn't reproduce your case. Could you provide a code snippet (e. g. Codesandbox) with your exact issue?

kalkson avatar Jun 14 '22 20:06 kalkson