Why can't I make my animation loop infinitely?

Fasa
Tourist
4 0 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 %}

<style>
.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%; }
}
</style>

<div class="slider-announcement-bar{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<div class="slider-content">
{% for i in (1..10) %}
<p>{{ section.settings.announcement_text }}</p>
{% endfor %}
{% for i in (1..10) %}
<p>{{ section.settings.announcement_text }}</p>
{% endfor %}
</div>
</div>


{% 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:
https://fasapentole.myshopify.com/?_ab=0&_fd=0&_sc=1
pw: cicciopanza


Thank you in advance!

Reply 1 (1)

Jasoliya
Shopify Expert
4817 623 1223

Hi 

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here