"Blinking" Issue with Scrolling Text Animation

[titouandienis]

Hello Shopify Community,

I'm a beginner working on a custom section. I've created a scrolling text animation, but I'm facing a "blinking" or "flickering" issue every time a set of text exits the viewport. I've tried various solutions, but the problem persists.

Here's a simplified version of my code:

<div class="sl-scrolling-text-wrapper">
    <div class="sl-scrolling-text" style="animation: scrollText {{ section.settings.speed }}s linear infinite;">
      <!-- Repeated text blocks for demonstration -->
      <span>{{ block.settings.text }}</span>
      <span>{{ block.settings.text }}</span>
      <span>{{ block.settings.text }}</span>
    </div>
</div>

.sl-scrolling-text-wrapper {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

.sl-scrolling-text {
    display: inline-block;
    position: relative;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    animation-timing-function: linear;
}

@keyframes scrollText {
  {% if section.settings.orientation == 'rtl' %}
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-33.33%, 0, 0);
  }
  {% else %}
  0% {
    transform: translate3d(-33.33%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
  {% endif %}
}

The text scrolls, but there's a noticeable flicker when one set of text exits and the next set starts to appear.

Any guidance or suggestions would be greatly appreciated!

Thank you in advance!

[Liam · Accepted solution]

Hi Optifyagency,

I think this issue might be due to how you've set up your CSS rather than anything Shopify related -specifically it could be caused by the fact that the CSS animation is trying to create an infinite loop of your text. When the animation reaches 100%, it abruptly jumps back to 0% which causes the flickering effect.

To solve this issue, you can try adding the same text block at the beginning and the end of your scrolling text. This way, when the animation reaches the end, it will seamlessly transition to the beginning without the abrupt jump.

Hope this helps!