Shopify CSS marquee loads late when blocks are used

[vaishnavi_s0129]

I'm creating a logo list for Shopify theme and I wanted a marquee effect on the logos to be added, as logos are considered as blocks to add, it works but at the last block at the end of the for loop, the animation feels like it breaks and after few secs it shows back when for loop starts again, I'll attach a gif to show..

here's the code

  {% liquid
      case section.blocks.size 
        when 3
          assign keyframe = 900
          assign width = 600
        when 4
          assign keyframe = 1200
          assign width = 900
        when 5 
          assign keyframe = 1500
          assign width = 1200
        when 6
          assign keyframe = 1800 
          assign width = 1500
        when 7
          assign keyframe = 2100 
          assign width = 1800
        when 8 
          assign keyframe = 2400
          assign width = 2100
        when 9
          assign keyframe = 2700 
          assign width = 2400
        when 10
          assign keyframe = 3000
          assign width = 2700
      endcase %}
    
    <style>      .logo_list--marquee {
        display: flex;
        overflow-x: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        min-width: 100%;
        height: 200px;
       }

      .marquee--content {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        width: {{ width }}px;
        animation: slide-left {{ section.settings.marquee_speed }}s linear infinite;
      }
      @keyframes slide-left {
        from { 
          transform: translateX(0); 
        }
        to { 
          transform: translateX(-{{ keyframe }}px); 
        }
      } 
    </style>
    
    <div class="row logo_list--marquee">
          <div class="marquee--content">
           {% liquid
                 for block in section.blocks
                    <div class="col-md-4 col-sm-6 col-6 logo_list--logo">
                        {%- if link != blank -%}
                          <a href="{{ link }}">
                        {%- endif -%}
                    <div class="logo__img">
                        {%- if image != blank -%}
                          {{ image | image_url: width: 1500 | image_tag:
                           width: image.width,
                           height: image.height,
                           widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
                           alt: image.alt | escape }}
                        {%- else -%}
                           {{ 'logo' | placeholder_svg_tag: 'logo-list__placeholder' }}
                        {%- endif -%}
                    </div>
                     {%- if link != blank -%}
                       </a>
                         {%- endif -%}
                     </div>
                  endfor
                  if section.blocks.size >= 3 and section.settings.marquee
                      for block in section.blocks
                           if forloop.last == true
                              break
                           else
                               <div class="col-md-4 col-sm-6 col-6 logo_list--logo">
                        {%- if link != blank -%}
                          <a href="{{ link }}">
                        {%- endif -%}
                    <div class="logo__img">
                        {%- if image != blank -%}
                          {{ image | image_url: width: 1500 | image_tag:
                           width: image.width,
                           height: image.height,
                           widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
                           alt: image.alt | escape }}
                        {%- else -%}
                           {{ 'logo' | placeholder_svg_tag: 'logo-list__placeholder' }}
                        {%- endif -%}
                    </div>
                     {%- if link != blank -%}
                       </a>
                         {%- endif -%}
                     </div>
                           endif
                       endfor
                   endif %}
          </div>
        </div>   

[OneCommerce]

Hello @vaishnavi_s0129 ,

We are OneExperts from OneCommerce and we're to support you.

According to your code provided, we edited it a little bit. You may want to try this new edit version:

{% case section.blocks.size %}
 {% when 3 %}
   {% assign keyframe = 900 %}
   {% assign width = 600 %}
 {% when 4 %}
   {% assign keyframe = 1200 %}
   {% assign width = 900 %}
 {% when 5 %}
   {% assign keyframe = 1500 %}
   {% assign width = 1200 %}
 {% when 6 %}
   {% assign keyframe = 1800 %}
   {% assign width = 1500 %}
 {% when 7 %}
   {% assign keyframe = 2100 %}
   {% assign width = 1800 %}
 {% when 8 %}
   {% assign keyframe = 2400 %}
   {% assign width = 2100 %}
 {% when 9 %}
   {% assign keyframe = 2700 %}
   {% assign width = 2400 %}
 {% when 10 %}
   {% assign keyframe = 3000 %}
   {% assign width = 2700 %}
{% endcase %}

<style>
.logo_list--marquee {
  display: flex;
  overflow-x: hidden;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 100%;
  height: 200px;
}

.marquee--content {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: {{ width }}px;
  animation: slide-left {{ section.settings.marquee_speed }}s linear infinite;
}

@keyframes slide-left {
 from { 
  transform: translateX(0); 
 }
 to { 
  transform: translateX(-{{ keyframe }}px); 
 }
} 
</style>

<div class="row logo_list--marquee">
  <div class="marquee--content">
   {% for block in section.blocks %}
     <div class="col-md-4 col-sm-6 col-6 logo_list--logo">
       {% if block.link != blank %}
         <a href="{{ block.link }}">
      {% endif %}
<div class="logo__img">
 {% if block.image != blank %}
   {{ block.image | image_url: width: 1500 | image_tag:
      width: block.image.width,
      height: block.image.height,
      widths: '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840',
      alt: block.image.alt | escape }}
  {% else %}
     {{ 'logo' | placeholder_svg_tag: 'logo-list__placeholder' }}
  {% endif %}
 </div>
 {% if block.link != blank %}
   </a>
 {% endif %}
</div>
{% endfor %}

{% if section.blocks.size >= 3 and section.settings.marquee %}
 {% for block in section

 Hope this is helpful for you. Please don't be hesitate to contact us for any further assistance.

If you found our answer is helpful, please hit the Like Button or mark it as Accepted Solution to let us know, it means a lot to us.

Best regards,

OneCommerce team.