Why can't I make my animation loop infinitely?

Store Design
,

Topic summary

A user is building a custom announcement bar section in Shopify and encountering two specific issues:

Problems:

  • The CSS animation doesn’t loop infinitely as intended
  • The bar starts empty and fills from right to left, but they want it to start already full

Current Implementation:

  • Uses CSS keyframe animation (slideLeft) with animation: slideLeft {{ animation_duration }}ms linear infinite
  • The animation moves content from left: 100% to left: -100%
  • Includes customizable settings for colors, height, font, spacing, and rotation speed

Response:
Another user suggests the CSS slider approach may be the issue and recommends implementing an actual slider element using libraries like Slick or Flickity instead.

Status: The discussion remains open with no definitive solution provided yet for fixing the CSS animation approach.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

Hello everyone,

I’m trying to add sections via code, creating them myself.
Unfortunately, I’m having trouble making the animation of my announcement bar infinite (meaning that at a certain point, it restarts).

I would also like to understand how to start the animation with the bar already full, rather than starting empty and filling from the right.

Could you please take a look at the code?

{% assign margin_difference = section.settings.bar_height | minus: 20 %}
{% assign margin_half = margin_difference | divided_by: 2 %}

{% assign animation_duration = 10000 | divided_by: section.settings.rotation_speed %}

.slider-announcement-bar { overflow: hidden; position: relative; width: 100%; background-color: {{ section.settings.background_color }}; color: {{ section.settings.text_color }}; padding: {{ section.settings.section_padding }}px; /* Aggiunto padding personalizzabile */ height: {{ section.settings.bar_height }}px; font-family: {{ section.settings.font_family }}; font-size: {{ section.settings.font_size }}px; /* Aggiunto font size personalizzabile */ } .slider-content { white-space: nowrap; position: absolute; top: 50%; left: 0; transform: translateY(-50%); animation: slideLeft {{ animation_duration }}ms linear infinite; } .slider-content p { display: inline-block; margin: {{ margin_half }}px 0; padding: 10px; margin-right: {{ section.settings.text_spacing }}px; } @keyframes slideLeft { 0% { left: 100%; } 100% { left: -100%; } }
{% for i in (1..10) %}

{{ section.settings.announcement_text }}

{% endfor %} {% for i in (1..10) %}

{{ section.settings.announcement_text }}

{% endfor %}

{% schema %}
{
“name”: “Slider Announcement Bar”,
“settings”: [
{
“type”: “checkbox”,
“id”: “include_margins”,
“default”: true,
“label”: “Include Margins”
},
{
“type”: “color”,
“id”: “text_color”,
“label”: “Text Color”,
“default”: “#ffffff”
},
{
“type”: “color”,
“id”: “background_color”,
“label”: “Background Color”,
“default”: “#333333”
},
{
“type”: “text”,
“id”: “announcement_text”,
“label”: “Announcement Text”
},
{
“type”: “range”,
“id”: “bar_height”,
“label”: “Bar Height (px)”,
“min”: 10,
“max”: 100,
“step”: 1,
“default”: 30
},
{
“type”: “range”,
“id”: “rotation_speed”,
“label”: “Rotation Speed”,
“min”: 1,
“max”: 10,
“step”: 1,
“default”: 5
},
{
“type”: “select”,
“id”: “font_family”,
“label”: “Font Family”,
“options”: [
{“value”: “Arial, sans-serif”, “label”: “Arial”},
{“value”: “Helvetica, sans-serif”, “label”: “Helvetica”},
{“value”: “Times New Roman, serif”, “label”: “Times New Roman”},
{“value”: “Courier New, monospace”, “label”: “Courier New”}
],
“default”: “Arial, sans-serif”
},
{
“type”: “range”,
“id”: “font_size”,
“label”: “Font Size (px)”,
“min”: 10,
“max”: 50,
“step”: 1,
“default”: 14
},
{
“type”: “range”, /* Aggiunto padding personalizzabile */
“id”: “section_padding”,
“label”: “Section Padding (px)”,
“min”: 0,
“max”: 50,
“step”: 1,
“default”: 10
}
],
“presets”: [
{
“name”: “Slider Announcement Bar”
}
]
}
{% endschema %}

If you want to look how it is on the site:

pw: cicciopanza

Thank you in advance!

2

Hi

With css slider it must work like that you have to implement actual slider for that like slick or flickity slider

1 Like